使用jQuery切换子菜单，但如果子菜单页面处于活动状态，则保持子菜单打开。

Question

我正在尝试深入研究jquery，如果已经有答案，请原谅。我搜索过，但找不到与我尝试做的事情相关的示例。

我有一个带有一些子菜单的垂直菜单。当点击顶级菜单时，它会展开子菜单。问题是，当单击子菜单项时，我希望子菜单保持打开状态。现在的情况是，当单击子菜单项时，菜单会折叠。

这是我的代码：

// Add class of drop if item has sub-menu
$('ul.sub-menu').closest('li').addClass('drop');

// Left Sidebar Main Navigation
var menu_ul = $('.menu > li.drop > ul'),
    menu_a  = $('.menu > li.drop > a');

menu_ul.hide();

menu_a.click(function(e) {
    e.preventDefault();
    if(!$(this).hasClass('active')) {
        menu_a.removeClass('active');
        menu_ul.filter(':visible').slideUp('normal');
        $(this).addClass('active').next().stop(true,true).slideDown('normal');
    } else {
        $(this).removeClass('active');
        $(this).next().stop(true,true).slideUp('normal');
    }
});

我认为如果我试着将我的想法转化成清晰的程序员类型的句子，它会像这样。基本上，我需要查询DOM以查找具有子菜单的任何活动菜单，并且如果页面显示子菜单项之一，则显示子菜单下拉列表。

- Grady

---

你能提供一个JSFiddle以供测试吗？ - Cheluis

@Cheluis，我似乎无法将需要展示的所有内容放入Fiddle中。这是它在网站上的链接（http://jeniolsendesign.com/tempurl）。 - Grady

@Cheluis 我创建了一个 JSFiddle，但它只显示导航菜单。并没有真正实现导航到子菜单页面并保持菜单打开的效果。http://jsfiddle.net/4kYde/ - Grady

Answer 1

我认为你有两个选择。

1. 考虑使用Ajax加载你的页面
2. 模拟每个页面上的点击事件。

例如：

对于“投资组合”项目，请添加以下内容

<script type="text/javascript">
  $(document).ready(function(){
      jQuery('#menu-item-38>a').trigger('click');
  });
</script>

关于我们：

<script type="text/javascript">
  $(document).ready(function(){
      jQuery('#menu-item-180>a').trigger('click');
  });
</script>

- MCSI

---

使用＃2起作用：）。这是在WP主题中，我有一个投资组合php文件，所以代码就在那里。对于3个关于我们页面，我将其放入编辑器的html部分，仅适用于这些页面。对于其他阅读此内容的人，我更改了$（document）为jQuery（document），以使其对我起作用。对于使用此方法的更持久的修复，我可以创建一个包含该小段代码的“关于我们”页面模板。 - Grady

很好！如果这对您有帮助，请记得接受答案！;) - MCSI

Answer 2

在您的样式表中创建一个额外的类。

.menu ul.keepthisopen {display:block !important;}

在子菜单中，将要保持打开的 ul 添加类名。

（示例） 在“关于”页面中，进入代码，找到菜单，找到“关于”链接，即

项，在其下方是该子菜单。将其更改为

。

<ul class="keepthisopen">

这里使用和你一样的代码/脚本，工作正常。如果你点击另一个菜单项，子菜单也会再次向上滑动。

我正在使用简单的代码（小网站），所以对于每个页面手动更改这个很容易。

- user3137087

Answer 3

移除这行代码怎么样？

menu_ul.filter(':visible').slideUp('normal');

这将防止隐藏非活动菜单。

试一试并告诉我们。

- Cheluis

---

这允许切换任何子菜单，但当子菜单项被点击时，它们都会关闭。在此处查看：http://jeniolsendesign.com/about/clients/ - Grady

如果您点击子菜单，它会加载整个页面...我现在很困惑。 - Cheluis