单击按钮并使div隐藏在可折叠的折叠面板中
单击按钮并使div隐藏在可折叠的折叠面板中
提问于 2019-05-14 02:42:19
单击重复按钮可折叠网站中重复的手风琴
我有一个折叠按钮(使用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中的错误，我将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56118155
复制相关文章
相似问题
腾讯云开发者
