jquery切换子菜单，但保持子菜单打开，如果子菜单页面激活 [英] jquery to toggle sub-menu but keep sub-menu open if sub-menu page active

问题描述

只是试图潜入jquery并原谅我，如果这已被回答。已搜索但找不到与我正在尝试执行的操作有关的示例。

我有一个包含一些子菜单的垂直菜单。这是工作，当顶级菜单被点击时，子菜单打开。问题是我希望子菜单项在点击子菜单项时保持打开状态。就像现在一样，当一个子菜单项被点击时，菜单崩溃。

这里是我的代码：

  //添加drop类如果item有子菜单
 $（'ul.sub-menu'）。closest（'li'）。addClass（'drop'）; 
 
 //左侧栏主导航
 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，如果页面显示其中一个子菜单项，则显示子菜单下拉菜单。

1. 考虑使用Ajax来加载你的页面
   li>
   
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> 
  

Just trying to dive into jquery and forgive me if this has already been answered. Searched but couldn't find an example relevant to what I'm trying to do.

I have a vertical menu with some sub menus. It is working that when the top level menu is clicked the sub menu opens up. The problem is that I would like the sub menu to stay open when one of sub-menu items is clicked. As it is now, when a sub-menu item is clicked the menu collapses.

Here is my code:

// 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');
    }
});

I think if I try and translate what I want into a clear coder type sentence it would read like this. Basically I need to query the DOM for any active menu that has sub-menu, and if the page is showing one of the submenu items, then display the sub-menu dropdown.

解决方案

I think you have two options.

1. Consider using Ajax to load your pages
2. Simulate the click event on each page.

For example:

For "Portfolio" items add this

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

For "About Us":

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

这篇关于jquery切换子菜单，但保持子菜单打开，如果子菜单页面激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！