javascript - Bootstrap可折叠嵌套导航jquery适用于多个目标

Question

我有一个嵌套的树导航，其中包含可折叠(使用 Bootstrap 3.0 Collapse)内容，并带有默认列表样式的图标。我想在折叠区域扩展时更改图标。 但是当我关闭内部折叠区域时，所有图标都会变回来。

我是一个 javascript 新手，并从 this 获取了代码邮政。它将类 .icon-right 添加到 shown.bs.collapse 上的 li 元素，并在 hidden.bs.collapse< 上将其删除。但它不仅仅适用于目标元素。

如何编辑它以仅定位正在关闭的图标？

这是 CodePen 上的代码:http://codepen.io/anon/pen/PPyrQg .

HTML

<ul class="ls-nav">
      <li id="expand1">
        <a role="button" data-toggle="collapse" href="#collapseContent1" aria-expanded="true" aria-controls="collapseContent1">Lorem Ipsum
        </a>
        <div class="collapse" id="collapseContent1">
          <ul class="ls-inner">
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li id="expand2">
              <a role="button" data-toggle="collapse" href="#collapseContent2" aria-expanded="true" aria-controls="collapseContent2">Lorem Ipsum
               </a>
               <div class="collapse" id="collapseContent2">
              <ul class="ls-inner-dot">
                <li class="active">Lorem</li>
                <li>Lorem</li>
              </ul>
              </div>
            </li>
            <li>Lorem</li>
          </ul>
        </div>
      </li>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Lorem</li>
    </ul>

JS

      $('#collapseContent1').on('shown.bs.collapse', function () {
    $("#expand1").addClass("icon-down");
  });

  $('#collapseContent1').on('hidden.bs.collapse', function () {
    $("#expand1").removeClass("icon-down");
  });

  $('#collapseContent2').on('shown.bs.collapse', function () {
    $("#expand2").addClass("icon-down");
  });

  $('#collapseContent2').on('hidden.bs.collapse', function () {
    $("#expand2").removeClass("icon-down");
  });

我已经找了两天了，如果有人能帮助我，我会很高兴。

Answer 1

只需添加您的 aria-controls作为您的类(class) <a>标签，然后切换.icon-down的Class在您的expand上唯一的 ID。这是一个带有代码的工作演示:

这里有一个演示来说明其工作原理:

       <ul class="ls-nav">
          <li id="expand1" >
            <a class="collapseContent1" role="button" data-toggle="collapse" href="#collapseContent1" aria-expanded="true" aria-controls="collapseContent1">Lorem Ipsum
            </a>
            <div class="collapse" id="collapseContent1">
              <ul class="ls-inner">
                <li>Lorem</li>
                <li>Lorem</li>
                <li>Lorem</li>
                <li>Lorem</li>
                <li id="expand2">
                  <a class="collapseContent2" role="button" data-toggle="collapse" class="collapseContent2" href="#collapseContent2" aria-expanded="true" aria-controls="collapseContent2">Lorem Ipsum
                   </a>
                   <div class="collapse" id="collapseContent2">
                  <ul class="ls-inner-dot">
                    <li class="active">Lorem</li>
                    <li>Lorem</li>
                  </ul>
                  </div>
                </li>
                <li>Lorem</li>
              </ul>
            </div>
          </li>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
      </ul>

JS:

  $('.collapseContent2').on('click', function() {
    $("#expand2").toggleClass("icon-down");
  });

    $('.collapseContent1').on('click', function() {
    $("#expand1").toggleClass("icon-down");
  });

CODEPEN DEMO