Question

我正在努力为移动网站创建/完成菜单之类的应用。

单击导航栏中的按钮时，将显示一个菜单弹出窗口。当我再次单击该按钮时，它很好地关闭了。但是，当打开弹出窗口并单击导航栏中的另一个按钮时，两个菜单就会相互重叠。

我正在努力使自己的逻辑正确。既然补习班是行不通的。我正在为此做很长时间，所以也许我想念一些简单/愚蠢的东西。

我在这里创建了fiddle以便更好地解释问题。

任何帮助表示赞赏。

$(function() {
  var $body = $("body"),
    $btn = $(".menuButton"),
    $menu = $(".mobile-menu");
  $btn.one('click', function() {
    $body.append('<div class="mobile-menu-overlay" />');
  });
  $btn.on('click', function() {
    $(this).siblings().removeClass('open');

    var $open_menu = $(this).data('open');
    $menu.find('.' + $open_menu).toggle()

    if ($(this).hasClass('open')) {
      $(this).removeClass('open')
      $body.removeClass('mobile-open')
      $(this).closest($menu).removeClass('open')
    } else {
      $(this).addClass('open')
      $body.addClass('mobile-open')
      $(this).closest($menu).addClass('open')
    }

    //  $(this).siblings().removeClass('open');

    //   var $open_menu =  $(this).data('open');
    //   $menu.find('.'+$open_menu).toggle()

    //   $(this).toggleClass('open')
    //   $body.addClass('mobile-open')
    //   $(this).closest($menu).addClass('open')

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mobile-nav">
  <ul>
    <li class="search menuButton" data-open="search"><span>Search</span></li>
    <li class="menu menuButton" data-open="nav"><span>Menu</span></li>
    <li class="cart menuButton" data-open="cart"><span>Cart</span></li>
    <li class="account menuButton" data-open="account"><span>Account</span></li>
  </ul>
</div>
<div class="mobile-menu">
  <div class="mobile-section top-section open">

    <div class="section-content">
      <div class="account" style="background:yellow">account content</div>
      <div class="cart" style="background:blue">cart</div>
      <div class="search" style="background:orange">search</div>
      <ul class="nav" style="background:green">
        <li class="has-children">
          <a href="url" title="title">category-title
                  <span class="menu-icon" data-slide="forward">
                      <i class="fa fa-chevron-right"></i>
                  </span>
                 </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

问题在这里：

 $menu.find('.' + $open_menu).toggle()

切换菜单时，应关闭其同级菜单。

我建议使用类处理此问题，以便您可以执行以下操作：

$menu.find('.'+$open_menu).addClass('menu_open').siblings().removeClass('menu_open');

在其他按钮上打开/关闭移动菜单，点击

1 个答案: