Question

通过单击重复按钮折叠网站中的重复手风琴

我有一个手风琴按钮，（使用引导程序3的'panel-default'和'panel-collapse'类）在同一页面中重复了几次。在此手风琴按钮下方有另一个按钮，在同一页面中也重复了几次。当我单击特定按钮时，我希望它通过jquery折叠位于其上方的特定手风琴。


<div class="panel panel-default">
    <div class="panel-heading accordion-toggle question-toggle " data-toggle="collapse" data-parent="#faqAccordion" data-target="#infoAccordion" aria-expanded="false">
       <h4 class="panel-title">Edit Info</h4>
    </div>
    <div id="infoAccordion" class="panel-collapse collapse in" style="" aria-expanded="false">
         <div class="panel-body">
             some info
         </div>
    </div>
</div>

<div class="col-md-12  col-sm-12  col-xs-12 text-right pan">   
    <button class="nochg-btn">No Change</button>                
</div>

我已经尝试过：

$(document).ready(function(){
        $(".nochg-btn").click(function(){
          $(this).siblings(".panel-collapse").collapse("hide");

        });
    });

还：

$(document).ready(function(){
        $(".nochg-btn").click(function(){

          $(this).parent().siblings(".panel-default").addClass("collapsed");
          $(this).parent().children(".panel-collapse").removeClass("collapse");
          $(this).parent().children(".panel-collapse").removeClass("in");

        });
    });

和：

$(document).ready(function(){
        $(".nochg-btn").click(function(){
          $(event.target).closest('.panel-default').find('.panel-collapse').addClass("collapse");
          $(event.target).closest('.panel-default').find('.panel-collapse').addClass("in");
        });
    });

全部无济于事。如果有人可以帮助我检测jQuery中的错误，我将非常感谢！！！

Answer 1

     <script>
          $(document).ready(function(){
            $(".nochg-btn").click(function(){
               $(this).parents('.root').find(".panel-collapse").collapse("hide");
            });
        });
        </script>
        <div class="root">
    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle question-toggle " data-toggle="collapse" data-parent="#faqAccordion" data-target="#infoAccordion" aria-expanded="false">
       <h4 class="panel-title">Edit Info</h4>
    </div>
    <div id="infoAccordion" class="panel-collapse collapse in" style="" aria-expanded="false">
         <div class="panel-body">
             some info
         </div>
    </div>
    </div>

<div class="col-md-12  col-sm-12  col-xs-12 text-right pan">   
    <button class="nochg-btn">No Change</button>                
</div>
</div>



<div class="root">
    <div class="panel panel-default">
    <div class="panel-heading accordion-toggle question-toggle " data-toggle="collapse" data-parent="#faqAccordion" data-target="#infoAccordion" aria-expanded="false">
       <h4 class="panel-title">Edit Info</h4>
    </div>
    <div id="infoAccordion" class="panel-collapse collapse in" style="" aria-expanded="false">
         <div class="panel-body">
             some info
         </div>
    </div>
    </div>

<div class="col-md-12  col-sm-12  col-xs-12 text-right pan">   
    <button class="nochg-btn">No Change</button>                
</div>
</div>

单击一个按钮，使div隐藏在可折叠的手风琴中

1 个答案: