单击重复按钮可折叠网站中重复的手风琴
我有一个折叠按钮(使用bootstrap 3的“panel-default”和“panel- accordion”类),它在同一个页面中重复了几次。在这个手风琴按钮下面有另一个按钮,也在同一页面中重复了几次。当我点击一个特定的按钮时,我想让它通过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中的错误,我将不胜感激!
发布于 2019-05-14 03:11:29
<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>
https://stackoverflow.com/questions/56118155
复制相似问题