Jquery打开/关闭导航

时间:2014-06-15 08:57:17

标签: jquery html5

我用打开和关闭来构建导航列表。但是当我把 nav ul li.test a 打开隐藏的ul点击时没有任何反应。当我使用 nav ul li.test 而不使用 隐藏的ul打开但链接无法点击时,他们继续执行类似于父级ul的功能。我认为这是因为.test在隐藏的ul之后关闭所以它们都是od .test。所以我选择 nav ul li.test a ,但没有任何反应。这是一个实例:www.studioi.hr/index.php

   <nav> 
      <ul>
        <li class="test"><a href="#">Menu 1 <i class="fa fa-plus"></i></a>
           <ul>
             <li><a href="#11">Sub menu 1</a></li>
             <li><a href="#12">Sub menu 2</a></li>   
             <li><a href="#13">Sub menu 3</a></li>                       
           </ul>
        </li>
        <li class="test"><a href="#">Menu 2 <i class="fa fa-plus"></i></a>
           <ul>
             <li><a href="#21">Sub menu 1</a></li>
             <li><a href="#22">Sub menu 2</a></li>                       
           </ul>
        </li> 
      </ul>
    </nav>


jQuery(document).ready(function () {
    jQuery('nav ul li.test a').click(function(){
        jQuery('nav ul ul').hide();
        jQuery('nav ul li a i').addClass('fa-plus').removeClass('fa-minus');
        jQuery(this).children('ul').show();
        jQuery(this).find('a > i').removeClass('fa-plus').addClass('fa-minus');
        return false;  
    });
});

1 个答案:

答案 0 :(得分:2)

你必须改变这个:

jQuery(document).ready(function () {
    jQuery('nav ul li.test a').click(function(){
        jQuery('nav ul ul').hide();
        jQuery('nav ul li a i').addClass('fa-plus').removeClass('fa-minus');
        jQuery(this).next('ul').show(); // change this
        jQuery(this).find('a > i').removeClass('fa-plus').addClass('fa-minus');
        //add this statement
        if(jQuery(this).attr('href') != "#"){
          location.href = jQuery(this).attr('href');
        }
        return false;  
    });
});

正如我所示,您已将其更改为您的页面:)

在您的OP中,您尝试在a元素中找到子ul,但没有。