1. ホーム
  2. 質問と答え
  3. 別のパネルを選択してもパネルが閉じることはありません

別のパネルを選択してもパネルが閉じることはありません

2016-08-14 5 views
0

まず、私はこのすべてを初めて使っています。私がHTMLを書いた最後の時間には、ブートストラップはもちろんのこと、CSSのようなものはありませんでした！スクリプトを書く方法もわかりません。別のパネルを選択してもパネルが閉じることはありません

私は別のパネルにリンクするpills/tabsを使用しているFYIページを作成しています。約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

私は再びそれを試してみましょう...私の携帯電話に答えると、それは恐ろしい選択だった試してみました。

ここでは、何をしようとしているのかの例です。既定では、折りたたみ可能なパネルは一度に1つ開く必要があります。一見すると、この期待される機能を得るために必要なパネルグループラッパーを変更したり省略したりしたようです。具体的には、#faqAccordionというIDでパネルグループを識別したようですが、タブ上ではdata-parentを#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>

は限り取り組んであなたのplussesとマイナスを取得し、あなたはパネルを開くときに、すべての折りたたみ式の項目にクラスを変更する必要があります。

$('.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'); 
    } 
    });

この例では、代わりにglyphiconsのfontawesomeを使用しているが、それは同じ主体です。折りたたみ可能なアイテムが自分のサイトの特定のセクションにのみ影響を与えていることを確認するために、＃faqをラップとして使用しました。

次のペンは、それがどのように一緒になるかを示しています。

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

出典

2016-08-15 01:28:36

0

任意の違いはありませんでした "の" クラスを削除します。オープンパネルは、別のパネルが開いても折り畳まれません。

出典

2016-08-15 02:12:19

0

ありがとうございました！問題を引き起こしていたのはIDだった。 ...そして、これがどのように働くかの私の理解の欠如。

私はhttp://bootsnipp.com/snippets/featured/faq-with-categoriesにスニペットを見つけました。あなたの答えと一緒に私は正しいトラックに乗りました。

出典

2016-08-16 00:09:26

関連する問題

 関連する問題