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以查找具有子菜单的任何活动菜单，如果页面显示其中一个子菜单项，则显示子菜单下拉列表。

Answer 1

我认为你有两种选择。

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

例如：

对于“投资组合”项目，请添加此

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

Answer 2

如何删除此行

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

这会阻止隐藏非活动菜单。

尝试一下，让我们知道。

Answer 3

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

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

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

（实施例）在“关于”页面上，转到代码，找到菜单，找到“关于”链接，这是

项目，下面是该子菜单。将其更改为

<ul class="keepthisopen">

在这里运行正常，使用与您使用的相同的代码/脚本。如果单击另一个菜单项，子菜单也会再次向上滑动。

我正在使用普通代码（小网站），因此我很容易为每个页面手动更改此内容。

jquery切换子菜单但如果子菜单页面处于活动状态则保持子菜单打开

3 个答案: