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

【问题标题】：Bootstrap collapsible nested nav jquery applies to more than one targetsBootstrap 可折叠嵌套导航 jquery 适用于多个目标
【发布时间】：2016-02-10 10:53:42
【问题描述】：

我有一个带有可折叠（使用 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>

      $('#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");
  });

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

这里有一个演示来说明它是如何工作的：

       <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

【讨论】：

感谢您的时间和解释，您真的帮助了我。 ;-)

【解决方案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

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

【讨论】：