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>

jquery手风琴切换的正负符号

1 个答案: