Question

我正在使用Wayfinder和Accordion菜单的组合来驱动左列菜单的行为。这个菜单有两个级别，即：

<ul class="accordion">:
Menu 1
    Sub-menu 1.1
    Sub-menu 1.2    
    Sub-menu 1.3
Menu 2
    Sub-menu 2.1
    Sub-menu 2.2    
Menu 3
    Sub-menu 3.1
    Sub-menu 3.2    
Menu 4
    Sub-menu 4.1
    Sub-menu 4.2

还有以下标题菜单：

<ul class="nav"> (no sub-menus):
Menu 2
Menu 3

以下代码处理左列菜单（“accordion”类）。我想扩展代码，因此单击标题菜单（“nav”类）中的“菜单2”将与单击“菜单2”（“手风琴”类）具有相同的效果。即单击“菜单2”（“nav”类）将使用“accordion”类扩展“Menu 2”。

她是代码：

<script type="text/javascript">

    $(document).ready(function() {

        // Store variables

        var accordion_head = $('.accordion > li > a'),
            accordion_body = $('.accordion li > .sub-menu'),
            nav_head = $('.nav > li > a');

        // Open the first tab on load

        accordion_head.eq(2).addClass('active').next().slideDown('normal');         

        // Click function

        accordion_head.on('click', function(event) {

            // Disable header links

            event.preventDefault();

            // Show and hide the tabs on click

            if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
            else {
                    accordion_body.slideUp('normal');
                    accordion_head.removeClass('active');
                }
        });
        nav_head.on('click', function(event) {

            // Disable header links

            event.preventDefault();

            // Show and hide the 'accordion tabs' on click on the 'nav tabs'

            <missing part>

        });
    });
</script>

非常感谢，LG

Answer 1

定位所点击的父元素的索引，只要它们处于相同的顺序（home按钮之后）

$(function(){

  var accordion_head = $('.accordion > li > a'),
      accordion_sub  = $('.accordion li > .sub-menu'),
      nav_head       = $('.nav > li > a'); 

  accordion_head.not('.active').on('click', function(e){
      e.preventDefault();
      if (!$(e.target).hasClass('active')){
          $('.accordion > li > a').removeClass('active');
          accordion_sub.slideUp();
          $(this).addClass('active').closest('li').find('.sub-menu').slideDown();    
     }
  });

  nav_head.on('click', function(e){
      e.preventDefault();
      $('.accordion > li').eq( $(this).closest('li').index() ).find('a').click();
  });

});

JQuery，Accordion＆amp;多个菜单

1 个答案: