我有一个菜单和一个箭头，当它被点击时会打开菜单。我希望箭头在显示菜单时上下颠倒（旋转180度），并在关闭时向后翻转。这是我的代码：

HTML：

<代码><；按钮类="；移动-菜单-btn移动-菜单-btn-电影"；onclick="；切换菜单电影（）"；>；<；DIV ID="；BTN-Films"；>；<；/DIV>；<；/按钮>；<；DIV ID="；Mobile-Menu-Sub-DIV-Films"；>；<；UL>；<；Li>；项目1<；/Li>；<；Li>；项目2<；/Li>；<；Li>；项目3<；/Li>；<；/UL>；<；/DIV>；

JS：

<代码>函数ToggleMenuFilms（）{var X=document.getElementById（"；mobile-menu-sub-DIV-films"；）；if（X.style.display==="；block"；）{X.style.display="；无"；}否则{X.style.display="；阻止"；}}

我想补充的是"；if（X.style-display==="；block"；）{rotate.btn-films}else{do nothing}"；但我不知道怎么做。任何帮助都很感激。

顺晟科技：

在本例中，我更改了父元素的类名。通过控制类名，我可以更改按钮和菜单的外观。

<代码>函数ToggleMenuFilms（事件）{var menu=event.target.closest（' DIV.menu '）；menu.ClassList.Toggle（'打开'）；}

<button class="mobile-menu-btn mobile-menu-btn-films" onclick="toggleMenuFilms()">
  <div id="btn-films"></div>
</button>
<div id="mobile-menu-sub-div-films">
  <ul>
    <li>
      Item 1
    </li>
    <li>
      Item 2
    </li>
    <li>
      Item 3
    </li>
  </ul>
</div>

<代码><；DIV类=“菜单”>；<；button Class=“ mobile-menu-btn mobile-menu-btn-films ” onclick=“ togglemenufilms（event）”>；<；DIV ID=“ btn-films ”>；<；/DIV>；<；/按钮>；<；DIV ID=“ mobile-menu-sub-DIV-films ”>；<；UL>；<；Li>；项目1<；/Li>；<；Li>；项目2<；/Li>；<；Li>；项目3<；/Li>；<；/UL>；<；/DIV>；<；/DIV>；