时间戳

首页 > 解决方案 > 点击其他按钮打开/关闭移动菜单

javascript - 点击其他按钮打开/关闭移动菜单

问题描述

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

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

我正在努力使我的逻辑正确。由于切换课程不起作用。我正在为此努力，所以也许我错过了一些简单/愚蠢的事情。

我在这里创建了一个小提琴来更好地解释这个问题。

任何帮助表示赞赏。 

$(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>

标签： javascriptjqueryhtmlcss

解决方案

问题在这里：

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

当你切换一个菜单时，你应该关闭它的兄弟。

我建议使用类来处理这个问题，这样你就可以做这样的事情：

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

推荐阅读