打开另一个手风琴后自行关闭

时间：2018-10-17 09:47:46

标签： jquery

当用户选择一个手风琴菜单以打开一个菜单并关闭其他菜单时，我正在寻找创建该功能的方法。

目前，我具有在用户选择当前打开的菜单的顶层时删除类的功能。

但是我一直在尝试添加所有其他功能。我意识到这已经被问过了，我已经尝试实施其他非常好的建议，以获得我需要的重新使用。但是，我正在努力使它们与我的结构匹配。另外，我的jQuery知识目前很薄弱。

有人有什么建议吗？我现在正在转圈。

我具有以下结构。我对此没有真正的控制权，因为它是我继承并尝试使用拔钉器功能的WP，预先构建的模板项目-（为简化起见，简化了结构）

$(document).ready(function() {
  $('.sidebar .menu-item-has-children').click(function(e) {
    $(this).toggleClass('sub-menu-open');
  });

  $('.sidebar .menu-item-has-children ul li a').click(function(e) {
    e.stopPropagation();
  });

  if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
    $('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
  }
});
.sub-menu {
  display: none;
}

.sub-menu-open .sub-menu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
  <div class="widget widget_nav_menu">
    <div class="menu-employ-an-apprentice-accordion-container">
      <ul id="menu-employ-an-apprentice-accordion">
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 1 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 2 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 3 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 4 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 5 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</aside>

JS FIDDLE

3 个答案:

答案 0 :(得分：2)

只需添加/删除类即可：

$(document).ready(function() {
    var allSubmenus = $('.sidebar .menu-item-has-children');
    allSubmenus.click(function(e) {
        var thisSubmenu = $(this);
        if (thisSubmenu.hasClass('sub-menu-open')) {
            thisSubmenu.removeClass('sub-menu-open');
        } else {
            allSubmenus.removeClass('sub-menu-open');
            thisSubmenu.addClass('sub-menu-open');
        };
    });
});
.sub-menu {
    display: none;
}

.sub-menu-open .sub-menu {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside id "sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
    <div class="widget widget_nav_menu">
        <div class="menu-employ-an-apprentice-accordion-container">
            <ul id="menu-employ-an-apprentice-accordion">
                <li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="#">Link 1 - No sub menu</a>
                </li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
                    <a href="#">Link 2 - Has Sub menu</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="#">Link 3 - No sub menu</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page">
                    <a href="#">Link 4 - No sub menu</a>
                </li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
                    <a href="#">Link 5 - Has Sub menu</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                        <li>
                            <a href="#">Links</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</aside>

Updated Fiddle。

答案 1 :(得分：1)

要在打开另一个菜单时关闭其他菜单，可以使用.sub-menu-open类选择所有打开的实例，然后从它们中删除该类：

$(document).ready(function() {
  $('.sidebar .menu-item-has-children').click(function(e) {
    $('.sub-menu-open').not(this).removeClass('sub-menu-open'); // add this line
    $(this).toggleClass('sub-menu-open');
  });

  $('.sidebar .menu-item-has-children ul li a').click(function(e) {
    e.stopPropagation();
  });

  if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
    $('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
  }
});
.sub-menu {
  display: none;
}

.sub-menu-open .sub-menu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
  <div class="widget widget_nav_menu">
    <div class="menu-employ-an-apprentice-accordion-container">
      <ul id="menu-employ-an-apprentice-accordion">
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 1 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 2 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 3 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a href="#">Link 4 - No sub menu</a>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
          <a href="#">Link 5 - Has Sub menu</a>
          <ul class="sub-menu">
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
            <li>
              <a href="#">Links</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</aside>

答案 2 :(得分：1)

只需替换您的jquery代码

$('.sidebar .menu-item-has-children').click(function(e) {
    $('.sidebar .menu-item-has-children').removeClass('sub-menu-open')
    $(this).addClass('sub-menu-open');
});

您可以查看here

相关问题
最新问题