jQuery打开/关闭导航栏

Question

我正在创建一个带有展开和关闭功能的导航列表。但是当我将 nav ul li.test a 放到点击时打开隐藏的 ul 时，没有任何反应。当我使用 nav ul li.test 而不加上 a 时，隐藏的 ul 打开了，但链接无法点击，它们继续像父级 ul 一样执行函数。我认为这是因为 .test 在隐藏 ul 之后被关闭，所以它们都属于 .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;  
    });
});

- Akul Von Itram

Answer 1

你需要更改这个：

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，但没有。

- Alex Char

---

我进行了更改，现在隐藏列表已经打开，但是当我点击隐藏列表链接时，它不会带我到另一个页面，而是只关闭了隐藏列表，没有打开另一个页面。我使用您的代码更新了www.studioi.hr/index.php，所以您可以在那里查看。 - Akul Von Itram