중첩 된 아코디언 플러스/마이너스 아이콘 jQuery 클래스 선택기 문제

Question

부트 스트랩에 중첩 된 아코디언이 있으며 accordion show/hide를 토글하기 위해 제목에 더하기/빼기 아이콘이 추가되었습니다. 문제는 자식 아코디언 중 하나가 표시/숨기기를 할 때 jQuery 선택기를 사용하면 더하기/빼기 아이콘이 변경되지만 부모 플러스/마이너스 아이콘도 변경된다는 것입니다. 선택자들과 내가 여기서 잘못하고있는 것에 대한 어떤 생각? 어떤 도움을 주셔서 감사합니다. 고맙습니다. JQuery와

<div class="panel-group" id="accordion1"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">Kiewit</a></h3> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       <div class="panel-group" id="accordion2"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne1">East</a></h4> 
         </div> 
         <div id="collapseOne1" class="panel-collapse collapse"> 
          <div class="panel-body">Content here...</div> 
         </div> 
        </div> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2">West</a></h4> 
         </div> 
         <div id="collapseOne2" class="panel-collapse collapse in"> 
          <div class="panel-body">Content here...</div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Vulcan Materials</a></h3> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body">Content here...</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Copper Springs</a></h3> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse"> 
      <div class="panel-body">Content here...</div> 
     </div> 
    </div> 
</div> 

그리고 여기에 있습니다 : :

내가 추가

$('.collapse').on('show.bs.collapse', function() { 
    $(this).parent().find(".glyphicon-plus:first").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
    }).on('hide.bs.collapse', function() { 
    $(this).parent().find(".glyphicon-minus:first").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
    }); 

Answer 1

중첩 아코디언에서 플러스/마이너스 아이콘 "하위 메뉴"클래스, 방법이 중지 여기

는 구조입니다 숨겨진 이벤트를 트리거하는 외부 아코디언 메뉴는 내부 아코디언에서 트리거 된 이벤트의 전파를 중지하는 것입니다.

당신은

$('#accordion2 .panel-collapse').on('hidden.bs.collapse', function(event) { 
    event.stopPropagation(); 
    $(this).prev().find(".submenu").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
}); 

을 시도하거나 수 있습니다 단지 return false 단지 bootply

http://www.bootply.com/nLC4Mw3Vqr

다음의 표시 방법 등