Question

我有一个嵌套的树导航，具有可折叠（使用Bootstrap 3.0折叠）内容，其中包含默认列表样式的图标。我想在折叠区域扩展时更改图标。 但当我关闭内部崩溃区域时，所有图标都会改变。

我是一名javascript新手，并从this帖子中获取了代码。它会将.icon-right类添加到li上的shown.bs.collapse元素，并在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作为一个类添加到<a>代码中，然后在.icon-down唯一ID上添加expand的toggleClass。这是一个包含代码的工作演示：

这是一个演示如何工作的演示：

       <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

Answer 2

当触发#collapseContent2上的事件时，#collapseContent1会触发相同类型的事件，因为#collapseContent2是#collapseContent1的一部分。这称为事件冒泡。您可以通过调用jQuerys event.stopPropagation函数来停止冒充DOM的事件。

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

demo

这也可以轻松解决您的问题。

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

2 个答案: