自定义jquery脚本。 magento的手风琴式垂直菜单

时间:2012-01-07 18:40:33

标签: jquery magento menu jquery-ui-accordion

我在网上发现了这个jquery脚本,需要稍微自定义一下。它的作用是使magento中的垂直菜单具有手风琴效果。它只对第一个类别这样做,并且不允许您访问它。我想保留它,但也允许以相同的样式打开较低的类别,但也可以在单击时转到正确的页面。我希望这是有道理的!

这是脚本:

//
// this script was written by Ben Frain - more info at http://www.benfrain.com
// 
jQuery(document).ready(function(){
  jQuery('ul#vertnav > li > ul')
    .click(function(e){
      e.stopPropagation();
    })
    .hide();



//this section below prevents the first level links being followed. 
  jQuery('ul#vertnav > li').click(function(event) {
  event.preventDefault();
});

  jQuery('ul#vertnav > li, ul#vertnav > li > ul > li').click(function(){
    var selfClick = jQuery(this).find('ul:first').is(':visible');
    if(!selfClick) {
      jQuery(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();

    }

    jQuery(this)
      .find('ul:first')
      .stop(true, true)
      .slideToggle();

  });

  //this section make the nereast ul section to the link show
  var url = window.location.toString() // this will return http://mydomain.com/pagename.html?query=xxxxxx


  // this bit adds a class to the active section for CSS 
  jQuery('ul#vertnav > li a').each(function(){
      var myHref= jQuery(this).attr('href');
      if( url.match( myHref)) {
           jQuery(this).addClass('activeClassNameForCSSHighlight')
            jQuery(this).closest('ul').show();
      }
});

});

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

替换

jQuery('ul#vertnav > li > ul')

通过

jQuery('ul#vertnav').find('li > ul')

发生的地方。

它应该有效。检查this fiddle

编辑:在我的小提琴中,我修改了一点点隐藏“其他”菜单的逻辑,当点击一个时,并使用更多变量而不是选择器(出于性能原因)。