amp-html - 如何隐藏AMP中打开的下拉菜单(How can I hide the opened dropdown in AMP)

Question

I'm playing around with this navbar example https://www.ampstart.com/render/navbar-with-sidebar.amp#amp=1

(我在玩这个导航栏示例https://www.ampstart.com/render/navbar-with-sidebar.amp#amp=1)

Is it possible to close the opened dropdown if I click on the other?

(如果我单击另一个，是否可以关闭打开的下拉菜单？)

  ask by exotec translate from so

Answer 1

The following solution, to toggle the opened dropdown/accordion with amp-bind, works very well for me:

(以下解决方案通过amp-bind切换打开的下拉菜单/手风琴，对我来说效果很好：)

On the first drowdowm/accordion:

(在第一个drowdowm /手风琴上：)

<section [data-expand]="expandAc1" on="expand:AMP.setState({expandAc2: false, expandAc1: true})">

And on the other drowdowm/accordion:

(在另一个drowdowm /手风琴上：)

<section [data-expand]="expandAc2" on="expand:AMP.setState({expandAc1: false, expandAc2: true})">

Sources: https://github.com/edelight/amphtml/commit/c8197475a55f8ff15e87fb0969238ec76cf1d71c AMP: easy way to toggle a CSS class?

(来源： https : //github.com/edelight/amphtml/commit/c8197475a55f8ff15e87fb0969238ec76cf1d71c AMP：切换CSS类的简便方法？)