Jquery展开和折叠菜单不起作用

Question

我正在开发一个侧边栏菜单导航，当用户点击菜单时它会展开和折叠。最重要的是，如果页面加载时子菜单上的链接处于活动状态，我希望菜单保持展开状态。

这是我现在正在处理的代码示例。有人可以帮我检查一下我的代码的问题吗？

jQuery(document).ready(function(e) {
  {
    var m = e("ul.menu li.sidebar ul.sub-menu");
    e("li")
  }
  e("ul.menu > li.sidebar > a").click(function(e) {
      e.preventDefault()
    }),
    e(document).mouseup(function(i) {
      var n = e("li.sidebar");
      n.is(i.target) || 0 !== n.has(i.target).length || m.hide("fast")
    });
});

.sidebar {
  padding: 0 !important;
  margin-top: 2%;
}
.sidebar a {
  background-color: #122842;
  padding: 3%;
  color: white !important;
}
.sidebar .sidebar-submenu a {
  color: #6e6e6e !important;
  background-color: #e1ecf1 !important;
  display: block;
}
.sidebar .current-menu-item a {
  color: #22374f !important
}
.sidebar .sub-menu {
  display: none;
}
.current-menu-ancestor .sub-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul class="menu ">
  <li class="sidebar current-menu-ancestor"><a href="#">Menu A ▶</a>
    <ul class="sub-menu">
      <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/">submenu 1</a>
      </li>
      <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/#sectionb">submenu 2</a>
      </li>
      <li class="sidebar-submenu"><a href="a.com/menu2">submenu 3</a>
      </li>
    </ul>
  </li>
  <li class="sidebar current-menu-ancestor"><a href="#">Menu B ▶</a>
    <ul class="sub-menu">
      <li class="sidebar-submenu current-menu-item"><a href="a.com/menu1/#sectionc">submenu 4</a>
      </li>
      <li class="sidebar-submenu"><a href="a.com/menu2/#sectionb">submenu 5</a>
      </li>
      <li class="sidebar-submenu"><a href="a.com/menu3">submenu 6</a>
      </li>
    </ul>
  </li>
  <li class="sidebar"><a href="#">Menu C ▶</a>
    <ul class="sub-menu">
      <li class="sidebar-submenu"><a href="a.com/menu4">submenu 7</a>
      </li>
      <li class="sidebar-submenu"><a href="a.com/menu5">submenu 8</a>
      </li>
    </ul>
  </li>
</ul>

这些是我想要实现的行为：

• 子菜单 1、子菜单 2 和子菜单 4 在同一页面上，但“菜单”不同。如果页面被选中，菜单 A 和菜单 B 都会展开，而菜单 C 保持折叠状态。
• 如果用户点击菜单 A 下的子菜单 3，当页面加载时，菜单 A 展开，而菜单 B 和 C 折叠。
• 只要子菜单处于活动状态，“current-menu-item”类就会添加到 li 标签和类“current-menu-ancestor”被添加到 ul 标签中

我现在遇到的问题：

• 当任何子菜单处于活动状态时，菜单会自动展开，但菜单不可点击

• 当我用下面的代码替换 jQuery 时，菜单是可点击的 并在任何子菜单处于活动状态时自动展开，但子菜单 菜单不可点击（未打开链接）

  jQuery(document).ready(function(e){
   jQuery('.sidebar a').click(function(e){  
        e.preventDefault();
   if (jQuery(('.sidebar').children('.sub-menu:first').is(':visible')) {
             jQuery(('.sidebar').children('.sub-menu:first').hide();
        } else {
             jQuery(('.sidebar').children('.sub-menu:first').show();
        }
  

  }); });

提前谢谢你！

Answer 1

请在 jquery 后面添加 jquery cookies 库

<script src="path/to/Scripts/jquery_cookie.js" type="text/javascript"></script>

查看更多信息stack-cookie-is-not-function