首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >单击按钮并使div隐藏在可折叠的折叠面板中

单击按钮并使div隐藏在可折叠的折叠面板中
EN

Stack Overflow用户
提问于 2019-05-14 02:42:19
回答 1查看 58关注 0票数 0

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

我有一个折叠按钮(使用bootstrap 3的“panel-default”和“panel- accordion”类),它在同一个页面中重复了几次。在这个手风琴按钮下面有另一个按钮,也在同一页面中重复了几次。当我点击一个特定的按钮时,我想让它通过jquery的方式折叠它所在的特定的折叠面板。

代码语言:javascript
复制
<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>

我已经试过了:

代码语言:javascript
复制
$(document).ready(function(){
        $(".nochg-btn").click(function(){
          $(this).siblings(".panel-collapse").collapse("hide");

        });
    });

另外:

代码语言:javascript
复制
$(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");

        });
    });

和:

代码语言:javascript
复制
$(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中的错误,我将不胜感激!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-14 03:11:29

代码语言:javascript
复制
     <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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56118155

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档