jQuery响应导航

我使用jQuery脚本和HTML/CSS构建了一个响应性导航。但是，如果我浏览主菜单项的子菜单项，我想添加一个活动类

您可以在此处找到当前结果：

在init.js和global.css中可以找到源代码

下一个问题是：如何在非活动菜单中向上滑动。示例：第一个主菜单位于“移动设备向下滑动”下，我单击下一个主菜单项向上滑动。然后我要另一个菜单滑入

      $('body', context).once('accordionmenu', function () {
        $('body').bind('responsivelayout', function (e, d) {        

        //Define your drupal menu id (only works with core menu block)
          var menuid = "#block-menu-block-1";        

        //This condition will act under the 'mobile' size, and will not be executed on ie6 and ie7
          if (d.to == 'mobile' && !$('html').hasClass('ie6') && !$('html').hasClass('ie7')) {       

             //Remove the ´hover´ event in the dropdown menu scrip below              
             $(menuid+' li').unbind();

             //Add a span tag that will aft as the expand button, you can change the output of that button here
             $(menuid+" ul.menu li.expanded").prepend( $("<span class='over' href='#'>Down</span>") );     

             //Create an open/close action on the accordion after clicking on the expand element         
             $(menuid+' ul.menu span.over').click(function (event) {     
                 event.preventDefault();
                 if ($(this).siblings('ul').is( ":visible" )){
                 $(this).siblings('ul').slideUp('fast');  
                 } else {           
                 $(this).siblings('ul').slideDown('fast');  
             }                       
             });             
          }               
          //this condition will work for all sizes exept mobile, but will act on ie6 and ie7 browsers     
          if (d.to != 'mobile' | $('html').hasClass('ie7') ) {            
             //remove the expand elements from the accordion menu
             $(menuid+" span.over").remove();    
             //hide the open accordion items removing the display block style
             $(menuid+" ul li ul").removeAttr("style");  
             //Simple hide/show event for the dropdown menus 
             $(menuid+' li').hover(
                 function(){
                 $('ul:first', $(this)).show();
                 },
                 function(){
                 $('ul', $(this)).hide();
                 }
              );
          }             

        });
      });
    }
  }     
}(jQuery));

$（'body'，context）.once（'acordionmenu'，function（）{
$（'body'）.bind（'responsivelayout'，函数（e，d）{
//定义drupal菜单id（仅适用于核心菜单块）
var menuid=“#block-menu-block-1”；
//此条件将在“移动”大小下起作用，不会在ie6和ie7上执行
如果（d.to=='mobile'&&&！$（'html'）.hasClass（'ie6'）&&！$（'html'）.hasClass（'ie7'））{
//删除下面下拉菜单纸条中的“悬停”事件
$（menuid+'li'）.unbind（）；
//添加一个span标记，作为展开按钮，可以在此处更改该按钮的输出
$（menuid+“ul.menu li.expanded”）.prepend（$（“Down”）；
//单击展开元素后，在手风琴上创建打开/关闭动作
$（menuid+'ul.menu span.over'）。单击（函数（事件）{
event.preventDefault（）；
如果（$（this.sibbines（'ul'））为（“：可见”））{
$（this）.兄弟姐妹（'ul'）.slideUp（'fast'）；
}否则{
$（this）.兄弟姐妹（'ul'）.slideDown（'fast'）；
}                       
});             
}               
//这种情况适用于除手机外的所有尺寸，但适用于ie6和ie7浏览器
if（d.to！=“mobile”|$（'html'）.hasClass（'ie7'））{
//从accordion菜单中删除展开元素
$（menuid+“span.over”）.remove（）；
//隐藏打开的手风琴项目删除显示块样式
$（menuid+“ul li ul”）.removeAttr（“样式”）；
//下拉菜单的简单隐藏/显示事件
$（menuid+'li'）。悬停(
函数（）{
$（'ul:first'，$（this））.show（）；
},
函数（）{
$（'ul'，$（this））.hide（）；
}
);
}             
});
});
}
}     
}（jQuery））；

如何在非活动菜单中向上滑动

在向下滑动菜单之前，向上滑动每个菜单。^+1此类操作的常见技巧，首先滑动/淡出/隐藏每个项目，然后显示特定的项目。