Question

我用打开和关闭来构建导航列表。我开始使用隐藏列表来打开和关闭，但是当打开子列表时，无法将fa类从fa-plus更改为fa-minus。

<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代码：

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

Answer 1

试试这个，

jQuery(document).ready(function () {
    jQuery('.test').on('click', function(){
        // hide all ul's
        jQuery('nav ul ul').hide();
        // add class plus and removing minus from all i
        jQuery('nav ul li a i').addClass('fa-plus').removeClass('fa-minus');
        // toggle only current li -> ul
        jQuery(this).children('ul').slideDown();
        // toggle class for current li -> i
        jQuery(this).find('a > i').removeClass('fa-plus').addClass('fa-minus');
        return false;  
    });
});

在导航中添加和删除类

1 个答案: