Bootstrap 3.3.7嵌套折叠面板（Accordion）caret联动异常求助

Looks like the problem here is event bubbling—when you interact with a nested collapse panel, the show.bs.collapse and hide.bs.collapse events bubble up to parent collapse elements, triggering their caret state changes even though the parent panel itself didn't expand or collapse.

Here's how to fix it:

Step 1: Modify Your JavaScript to Stop Event Propagation #

Update your collapse event handlers to prevent the events from bubbling up the DOM tree. This ensures only the target collapse panel's caret gets updated:

$('.panel .panel-collapse').on('show.bs.collapse', function(e) {
  // Stop the event from bubbling to parent collapse elements
  e.stopPropagation();
  $(this).prev('.panel-heading').find('.panel-title > a').addClass('dropup');
}).on('hide.bs.collapse', function(e) {
  e.stopPropagation();
  $(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
});

I also simplified your code by removing the unnecessary each() loop—jQuery can bind events directly to the matched set of elements without iterating manually.

Step 2: Verify Your CSS (Already Looks Good) #

Your custom caret styles are correct, but just to confirm, here's the cleaned-up version:

/* Default caret (pointing down) */
.panel .panel-heading > .panel-title > a > span.caret {
  border-top: 6px solid black;
}

/* Dropup caret (pointing up) */
.panel .panel-heading > .panel-title > a.dropup > span.caret {
  border-bottom: 6px solid black;
  border-top: none;
}

Why This Works #

By calling e.stopPropagation(), we prevent the collapse events from reaching parent <div class="panel-collapse"> elements. This means when you toggle a nested panel, only its corresponding caret will switch between up/down states—parent carets stay untouched unless you explicitly toggle their own panels.

Quick Check for HTML Structure #

Just make sure your nested panels are properly placed inside the parent's .panel-collapse container, like this (example structure):

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#root-accordion" href="#parent-collapse" aria-expanded="false" aria-controls="parent-collapse">
        <span class="caret caret-mr"></span>
      </a>
      Parent Panel
    </h4>
  </div>
  <div id="parent-collapse" class="panel-collapse collapse">
    <div class="panel-body">
      <!-- Nested Panel -->
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#parent-accordion" href="#child-collapse" aria-expanded="false" aria-controls="child-collapse">
              <span class="caret caret-mr"></span>
            </a>
            Child Panel
          </h4>
        </div>
        <div id="child-collapse" class="panel-collapse collapse">
          <div class="panel-body">
            Nested content here
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This ensures the data-parent attributes work as intended and the event bubbling fix takes full effect.

内容的提问来源于stack exchange，提问作者Julez