0

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

您在此处找到的当前结果：http: //www.neofelis.de

在 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));
4

0 回答 0