jquery手风琴切换的正负号

Question

我想在切换时在查询手风琴上添加正负号。 该符号在折叠时应加号，在展开时应减号。我尝试搜索各种帖子，但我无法找到它。我完全不知道jquery。任何帮助将不胜感激。你可以找到这个链接上的工作代码：

http://www.bootply.com/X3tSn83qU1

Answer 1

您可以添加一个图标，切换类来改变图像

$(document).ready(function() { 
 
    $(".accordion li:has(ul) > div").prepend('<i class="glyphicon glyphicon-minus" />') 
 

 
    $(".accordion > li > div").click(function(e) { 
 
    if ($(e.target).is('input')) { //if clicked on input element don't do anything 
 
     return 
 
    } 
 
    $('.active').not(this).removeClass('active').next().slideUp(300); 
 
    $(this).toggleClass('active'); 
 
    var $next = $(this).next().slideToggle(300); 
 
    var $ico = $(this).find('i.glyphicon').toggleClass('glyphicon-plus glyphicon-minus') 
 
    if (false == $(this).next().is(':visible')) { 
 
     $('.accordion > ul').not($next).slideUp(300); 
 
     $('.accordion i.glyphicon').not($ico).addClass('glyphicon-plus').removeClass('glyphicon-plus'); 
 
    } 
 
    }); 
 
    $('li :checkbox').on('click', function() { 
 
    var $chk = $(this), 
 
     $li = $chk.closest('li'), 
 
     $ul, $parent; 
 
    if ($li.has('ul')) { 
 
     $li.find(':checkbox').not(this).prop('checked', this.checked); 
 
    } 
 

 
    do { 
 
     $ul = $li.parent(); 
 
     $parent = $ul.siblings(':checkbox'); 
 
     if ($chk.is(':checked')) { 
 
     $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) 
 
     } else { 
 
     $parent.prop('checked', false) 
 
     } 
 
     $chk = $parent; 
 
     $li = $chk.closest('li'); 
 
    } while ($ul.is(':not(.someclass)')); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> 
 
<ul class="accordion"> 
 
    <li class="js_slider"> 
 
    <div> 
 
     <input type="checkbox"><a href="#">North America</a> 
 
    </div> 
 
    <ul class="accordion"> 
 
     <li class="js_slider"> 
 
     <div> 
 
      <input type="checkbox"><a href="#">Canada</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="js_slider"> 
 
     <div> 
 
      <input type="checkbox"><a href="#">United States of America</a> 
 
     </div> 
 
     <ul class="accordion"> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Alabama</a> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Alaska</a> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Florida</a> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Georgia</a> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <div> 
 
      <input type="checkbox"><a href="#">Texas</a> 
 
     </div> 
 
     <ul class="accordion"> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Austin</a> 
 
      </div> 
 
      </li> 
 

 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Dallas</a> 
 
      </div> 
 
      </li> 
 

 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Irving</a> 
 
      </div> 
 
      </li> 
 

 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Houston</a> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 

 
    <li> 
 
    <div> 
 
     <input type="checkbox"><a href="#">Latin America</a> 
 
    </div> 
 
    </li> 
 

 

 
    <li> 
 
    <div> 
 
     <input type="checkbox"><a href="#">Europe,Middle <br> East and Africa</a> 
 
    </div> 
 
    </li> 
 

 

 
    <li> 
 
    <div> 
 
     <input type="checkbox"><a href="#">Asia Pacific</a> 
 
    </div> 
 
    </li> 
 

 

 
</ul> 
 
<br> 
 
<br> 
 
<br> 
 
<ul class="accordion"> 
 
    <li> 
 
    <div> 
 
     <input type="checkbox"><a href="#">North America</a> 
 
    </div> 
 
    <ul class="accordion"> 
 
     <li> 
 
     <div> 
 
      <input type="checkbox"><a href="#">United States of America</a> 
 
     </div> 
 
     <ul class="accordion"> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox"><a href="#">Manager 1</a> 
 
      </div> 
 
      <ul class="accordion"> 
 
       <li> 
 
       <div> 
 
        <input type="checkbox"><a href="#">Alabama</a> 
 
       </div> 
 
       </li> 
 
       <li> 
 
       <div> 
 
        <input type="checkbox"><a href="#">Alaska</a> 
 
       </div> 
 
       </li> 
 
       <li> 
 
       <div> 
 
        <input type="checkbox"><a href="#">Florida</a> 
 
       </div> 
 
       </li> 
 
       <li> 
 
       <div> 
 
        <input type="checkbox"><a href="#">Georgia</a> 
 
       </div> 
 
       </li> 
 
       <li> 
 
       <div> 
 
        <input type="checkbox"><a href="#">Illinois</a> 
 
       </div> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox">Manager 2</div> 
 
      </li> 
 
      <li> 
 
      <div> 
 
       <input type="checkbox">Manager 3</div> 
 
      </li> 
 
     </ul> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 
</ul>