0

我正在使用 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

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

她的代码是：

<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

4

1 回答 1

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();
  });

});
于 2013-04-02T23:18:39.103 回答