1. 首页
  2. 问答
  3. 当另一个面板被选中时，面板不会关闭

当另一个面板被选中时，面板不会关闭

2016-08-14 74 views
0

首先，我对所有这些都是陌生的。上次我写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"> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <!-- Tab panes --> 
 
         <br> 
 
\t \t \t \t \t \t <div class="tab-content"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <!--BEGINNING OF GENERAL QUESTIONS --> 
 
         
 
          
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <!-- END OF GENERAL QUESTIONS--> 
 
          <!-- BEGINNING OF POA QUESTIONS--> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
          
 
\t \t \t \t \t \t \t <!-- END OF POA QUESTIONS--> 
 
          <!-- BEGINNING OF WILLS QUESTIONS--> 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t \t </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> 
 
\t \t \t \t \t \t \t \t </div> 
 
          </div> 
 
         </div> 
 
\t \t \t \t \t \t </div> 
 
</div> \t \t \t \t \t \t 
 
        </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>

来源

2016-08-14 Denis Guy

回答

0

让我再试试......试图回答我的手机上，这是一个可怕的选择。

下面是你要做的一个例子。默认情况下，可折叠面板应该一次打开一个。乍一看，它看起来像你修改或省略了获得这个预期功能所需的面板组包装。具体来说，它看起来像是使用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作为包裹，以确保可折叠项目仅在我网站的特定部分中受到影响。

下面的笔显示它是如何组合在一起的。

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

来源

2016-08-15 01:28:36

0

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

来源

2016-08-15 02:12:19

相关问题

 相关问题