展开并关闭手风琴引导程序

时间：2018-08-22 16:47:59

标签： javascript jquery twitter-bootstrap

你好，我在手风琴方面遇到了麻烦，这是我的代码，请照亮我！！ 

    <div id="tg-accordion" class="tg-accordion">
   <div class="tg-panel">
      <h4 class="active">Why is accreditation important</h4>
      <div class="tg-panelcontent" style="display: block;">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4 style="margin-bottom: 10px!important;">European Regulation 765/ 2008</h4>
      <div class="tg-panelcontent" style="display: none;">
         <div class="tg-jobdescription">
            <div class="tg-description" style="margin-bottom: 10px!important;">
               <p>description</p>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4>Recognition of certifications. How accreditation provides recognition</h4>
      <div class="tg-panelcontent" style="display: none;">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div>

这是html，当我第二次单击以关闭该Accordeon选项卡并且打开它以使tg面板背景为蓝色时，我想要一些jquery。 这是我的Jquery：

        $(function() {
            $('.tg-panelcontent').hide();
            // $('#tg-accordion h4:first').addClass('active').next().slideDown('slow');
            $('#tg-accordion h4').click(function() {
                if($(this).next().is(':hidden')) {
                    $('#tg-accordion h4').removeClass('active').next().slideUp('slow');
                    $(this).toggleClass('active').next().slideDown('slow');
                }
            });
        });

3 个答案:

答案 0 :(得分：2)

如果您已经包含了Bootstrap的脚本，则不需要其他脚本即可执行所需的行为。请查看此示例，该示例可从Bootstrap's official page获得。

通过此操作，data-toggle或<a>标签处的<button>属性表示该元素是“折叠切换器”，并且href / data-target指向一个元素ID，该元素ID是要折叠/展开的容器。简单：）

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

答案 1 :(得分：0)

您不需要任何东西。仅确保指向CSS的链接位于页面的顶部，并且脚本和页面的末尾。应该可以。

<!-- CSS needed at the beginning of the page -->


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Why is accreditation important
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
      description
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          European Regulation 765/ 2008
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
       description
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Recognition of certifications. How accreditation provides recognition
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        description
      </div>
    </div>
  </div>
</div>

<!-- Scripts needed at the end of the page -->

     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

答案 2 :(得分：0)

您可以简单地将data-toggle="collapse"与标题data-target="#idOfYourElement"一起添加以触发折叠。并将display:none替换为目标元素上的collapse类：

工作示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="tg-accordion" class="tg-accordion">
   <div class="tg-panel">
      <h4 class="active" data-toggle="collapse" data-target="#targetOne">Why is accreditation important</h4>
      <div class="tg-panelcontent collapse" id="targetOne">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4 data-toggle="collapse" data-target="#targetTwo" style="margin-bottom: 10px!important;" >European Regulation 765/ 2008</h4>
      <div class="tg-panelcontent collapse" id="targetTwo">
         <div class="tg-jobdescription">
            <div class="tg-description" style="margin-bottom: 10px!important;">
               <p>description</p>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4 data-toggle="collapse" data-target="#targetThree">Recognition of certifications. How accreditation provides recognition</h4>
      <div class="tg-panelcontent collapse" id="targetThree">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div>

相关问题
最新问题