Question

我正在基础6中构建一个菜单，由于缺少更好的解决方案，我试图在点击菜单项时单击Moue按钮。

<div data-sticky-container>
  <div class="small-12 sticky" data-sticky data-options="stickyOn: small" data-margin-top="0">

    <div class="title-bar" data-responsive-toggle="responsive-topbar" data-hide-for="medium">
      <a href="#" class="menu-text show-for-small-only">BB</a>
      <button class="menu-icon float-right" type="button" data-toggle></button>
    </div>

    <div class="top-bar" id="responsive-topbar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text hide-for-small-only">AA</li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="#" class="clicked">One</a></li>
          <li><a href="#" class="clicked">Two</a></li>
          <li><a href="#" class="clicked">Three</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>

 $('.clicked').click(function(evt) {
    $('.menu-icon').click();
});

</script>

此脚本是否定位到正确的元素？

<script>

     $('.clicked').click(function(evt) {
        $('.menu-icon').click();
    });

    </script>

有关如何解决此问题的任何建议吗？

Answer 1

此代码会将.top-bar元素设置为display: none;

$('.dropdown li a').click(function() {
 $('.top-bar').css('display', 'none');
});

JS-单击另一个按钮并单击关闭菜单

1 个答案: