jQuery手风琴的切换的加减符号

Anaya P

我想在切换时在查询手风琴中添加正负符号。折叠时，符号应为加号；展开时，符号应为减号。我尝试搜索各种帖子，但找不到。我根本不知道jquery。任何帮助将不胜感激。您可以在此链接上找到工作代码：

http://www.bootply.com/X3tSn83qU1

阿伦·P·约翰尼（Arun P Johny）

您可以添加图标并切换班级以更改图像

$(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。