引导程序可折叠嵌套导航jquery应用于多个目标

Bootstrap collapsible nested nav jquery applies to more than one targets

本文关键字：目标 应用于 jquery 可折叠 嵌套 导航 引导程序      更新时间：2023-09-26

我有一个嵌套的树导航，带有可折叠的（使用Bootstrap 3.0 Collapse）内容，带有默认列表样式的图标。我想在展开折叠区域时更改图标但当我关闭内部塌陷区域时，所有图标都会变回来

我是一个javascript新手，从这篇文章中获得了代码。它在shown.bs.collapse上将类.icon-right添加到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");
  });

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

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

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

       <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

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

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

演示

这也将是一个简单的解决你的问题。

相关文章：