选择另一个面板时面板不会关闭答案

【问题标题】：Panels do not close when another panel is selected选择另一个面板时面板不会关闭
【发布时间】：2016-08-14 21:36:43
【问题描述】：

首先，我对这一切都不熟悉。上次我写 HTML 时没有 CSS 之类的东西，更不用说 bootstrap 了！我也不知道如何编写脚本。

我正在创建一个仅供参考的页面，其中我使用链接到不同面板的药丸/标签。大约有 100 个面板，每个药丸/标签将显示大约 20 个。由此产生的布局正是我想要的。当我打开一个面板时，一切都很好，但是当我打开另一个面板时，第一个面板不会自动关闭。大部分代码取自互联网上的教程。我已经尝试了我能做的一切。救命！

谢谢。

我的 HTML 如下所示：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author"><!--[if IE]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <![endif]-->
    <title>Molly Xia Notary</title><!-- BOOTSTRAP CORE CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet"><!-- ION ICONS STYLES -->
    <link href="assets/css/ionicons.css" rel="stylesheet"><!-- FONT AWESOME ICONS STYLES -->
    <link href="assets/css/font-awesome.css" rel="stylesheet"><!-- FANCYBOX POPUP STYLES -->
    <link href="assets/js/source/jquery.fancybox.css" rel="stylesheet"><!-- STYLES FOR VIEWPORT ANIMATION -->
    <link href="assets/css/animations.min.css" rel="stylesheet"><!-- CUSTOM CSS -->
    <link href="assets/css/style.css" rel="stylesheet"><!-- HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
</head><!--FAQ SECTION START-->
<body>
    <section id="faq">
            <div class="container">
                <div class="row text-l header animate-in" data-anim-type="fade-in-up">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <br>
                        <br>
                        <h3>Frequently Asked Questions</h3>
                        <hr>
                    </div>
                </div>
                <div class="row animate-in" data-anim-type="fade-in-up">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="faq-wrapper">
						<div class="panel-group" id="faqAccordion">
                              
                                <!-- Nav tabs -->
                        <div class="card">
                                    <ul class="nav nav-pills nav-stacked pill-catagory" role="tablist">
                                        <li role="presentation">
                                            <a data-toggle="pill" href="#home" role="tab"></a>
                                        </li>
                                        <li class="active" role="presentation">
                                            <a align="center" data-toggle="pill" href="#office" role="tab">General Office Questions</a>
                                        </li>
                                        <li role="presentation">
                                            <a align="center" data-toggle="pill" href="#poa" role="tab">Power of Attorney Questions</a>
                                        </li>
                                        <li role="presentation">
                                            <a align="center" data-toggle="pill" href="#wills" role="tab">Will Questions</a>
                                        </li>
                                        <li role="presentation">
                                            <a align="center" data-toggle="pill" href="#rep" role="tab">Representation Agreement Questions</a>
                                        </li>
                                    </ul>
									</div>
						<!-- Tab panes -->
                        <br>
						<div class="tab-content">
						
						
						<!--BEGINNING OF GENERAL  QUESTIONS -->
                        
                            
							<div class="tab-pane fade in active" id="office" role="tabpanel">
                            <div class="panel panel-default">
                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-a1" data-toggle="collapse">
                                    <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> OFFICE 1</a></h4>
                                </div>
                                <div class="panel-collapse collapse" id="question-a1" style="height: 0px;">
                                    <div class="panel-body">
                                        <h5><span class="label label-primary">Answer</span></h5>
                                        <p>This is an answer</p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-a2" data-toggle="collapse">
                                    <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> OFFICE 2</a></h4>
                                </div>
                                <div class="panel-collapse collapse" id="question-a2">
                                    <div class="panel-body">
                                        <h5><span class="label label-primary">Answer</span></h5>
                                        <p>Another answer</p>
                                    </div>
                                </div>
                            </div>
							</div>
							
							<!-- END OF GENERAL  QUESTIONS-->
                            <!-- BEGINNING OF POA QUESTIONS-->
							
							<div class="tab-pane fade in" id="poa" role="tabpanel">
                            <div class="panel panel-default">
                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-b1" data-toggle="collapse">
                                    <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> POA 1</a></h4>
                                </div>
                                <div class="panel-collapse collapse" id="question-b1">
                                    <div class="panel-body">
                                        <h5><span class="label label-primary">Answer</span></h5>
                                        <p>Hello</p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-b2" data-toggle="collapse">
                                    <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> POA 2</a></h4>
                                </div>
                                <div class="panel-collapse collapse" id="question-b2">
                                    <div class="panel-body">
                                        <h5><span class="label label-primary">Answer</span></h5>
                                        <p>How's the weather?</p>
                                    </div>
                                </div>
								</div>
								</div>
                            
							<!-- END OF POA QUESTIONS-->
                            <!-- BEGINNING OF WILLS QUESTIONS-->
							<div class="tab-pane fade in" id="wills" role="tabpanel">
                            <div class="panel panel-default">
                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-c1" data-toggle="collapse">
                                    <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> WILL 1</a></h4>
                                </div>
                                <div class="panel-collapse collapse" id="question-c1">
                                    <div class="panel-body">
                                        <h5><span class="label label-primary">Answer</span></h5>
                                        <p>Watcha doin' today?</p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-c2" data-toggle="collapse">
                                    <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> WILL 2</a></h4>
                                </div>
                                <div class="panel-collapse collapse" id="question-c2">
                                    <div class="panel-body">
                                        <h5><span class="label label-primary">Answer</span></h5>
                                        <p>This is just not working!</p>
                                    </div>
									</div>
                                </div>
                            </div><!-- END OF WILL QUESTIONS-->
                            <!-- BEGINNING OF REPRESENTATION AGREEMENT QUESTIONS-->
                       <div class="tab-pane fade in" id="rep" role="tabpanel">
                        <div class="panel panel-default">
                            <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-d1" data-toggle="collapse">
                                <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> REP 1</a></h4>
                            </div>
                            <div class="panel-collapse collapse" id="question-d1">
                                <div class="panel-body">
                                    <h5><span class="label label-primary">Answer</span></h5>
                                    <p>A wasted weekend...</p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-d2" data-toggle="collapse">
                                <h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> REP 2</a></h4>
                            </div>
                            <div class="panel-collapse collapse" id="question-d2">
                                <div class="panel-body">
                                    <h5><span class="label label-primary">Answer</span></h5>
                                    <p>It is hot and humid.</p>
                                </div>
								</div>
                            </div>
                        </div>
						</div>
</div>						
                    </div>
                </div>
            </div>
        </div>
    </section>
    <hr>
    <!--FAQ SECTION END-->
    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
    <!-- CORE JQUERY -->
    <script src="assets/js/jquery-1.11.1.js">
    </script> <!-- BOOTSTRAP SCRIPTS -->
     
    <script src="assets/js/bootstrap.js">
    </script> <!-- EASING SCROLL SCRIPTS PLUGIN -->
     
    <script src="assets/js/vegas/jquery.vegas.min.js">
    </script> <!-- VEGAS SLIDESHOW SCRIPTS -->
     
    <script src="assets/js/jquery.easing.min.js">
    </script> <!-- FANCYBOX PLUGIN -->
     
    <script src="assets/js/source/jquery.fancybox.js">
    </script> <!-- ISOTOPE SCRIPTS -->
     
    <script src="assets/js/jquery.isotope.js">
    </script> <!-- VIEWPORT ANIMATION SCRIPTS   -->
     
    <script src="assets/js/appear.min.js">
    </script> 
    <script src="assets/js/animations.min.js">
    </script> <!-- CUSTOM SCRIPTS -->
     
    <script src="assets/js/custom-solid.js">
    </script> <!-- This script hides the mobile menu upon click -->
     
    <script>
        $(document).ready(function() {

            $('.nav a').on('click', function() {

                if ($(".btn-navbar").is(":visible")) {
                    $(".btn-navbar").trigger("click");
                } //bootstrap 2.x
                if ($(".navbar-toggle").is(":visible")) {
                    $(".navbar-toggle").trigger("click");
                } //bootstrap 3.x
            });

        });
    </script> <!-- This script toggles the FAQ section from plus to minus on click -->
     
    <script>
    $('.collapse').on('shown.bs.collapse', function(){
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    }).on('hidden.bs.collapse', function(){
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    });
    </script>
</body>
</html>

【问题讨论】：

标签： twitter-bootstrap tabs panels

【解决方案1】：

删除“in”类没有任何区别。打开另一个面板时，打开的面板仍然不会折叠。

【讨论】：

【解决方案2】：

让我再试一次...尝试用我的电话接听，这是一个可怕的选择。

这是您尝试执行的操作的示例。默认情况下，可折叠面板应一次打开一个。乍一看，您似乎已经修改或省略了获得此预期功能所需的面板组包装器。具体来说，您似乎已经使用 ID #faqAccordion 标识了您的面板组，但在您的选项卡上，您将数据父级称为 #accordion。

标准的引导可折叠格式是（从他们的网站修改了一点）：

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-empty">
      <div class="panel-heading" role="tab" id="heading1">
        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
          <a class="collapsed" >
            <i class="fa fa-plus"></i> Title
          </a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
        <div class="panel-body">
          Answer
        </div>
      </div>
    </div>
    <div class="panel panel-empty">
      <div class="panel-heading" role="tab" id="heading2">
        <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          <a class="collapsed" >
            <i class="fa fa-plus"></i> Title
          </a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
        <div class="panel-body">
          Answer
        </div>
      </div>
    </div>
  </div>

为了让你的优点和缺点发挥作用，你需要在打开面板时更改所有可折叠项目的类。

  $('.panel-title').click(function() {
    if ($(this).find('.fa').hasClass('fa-plus')) {
      $('#faq .fa').removeClass('fa-minus').addClass('fa-plus');
      $(this).find('.fa').removeClass('fa-plus').addClass('fa-minus');
    } else {
      $(this).find('.fa').removeClass('fa-minus').addClass('fa-plus');
    }
  });

此示例使用 fontawesome 代替 glyphicons，但原理相同。我还使用#faq 作为包装，以确保可折叠项目仅在我网站上的特定部分受到影响。

下面的 Pen 展示了这一切是如何结合在一起的。

http://codepen.io/mutualdesigns/pen/WxPKva?editors=0010

【讨论】：

【解决方案3】：

非常感谢！导致问题的是ID。 ...以及我对这一切如何运作缺乏了解。

我在http://bootsnipp.com/snippets/featured/faq-with-categories 找到了一个 sn-p，连同您的回答，我走上了正轨。

【讨论】：