【问题标题】:How do you make Twitter Bootstrap Accordion keep one group open?你如何让 Twitter Bootstrap Accordion 保持一组开放?
【发布时间】:2013-03-21 11:32:45
【问题描述】:

我正在尝试使用手风琴和折叠插件使用 Twitter 引导程序来模仿 Outlook 栏,到目前为止,我已经让折叠和手风琴工作了,但它目前允许折叠所有部分。

我想限制它,以便始终只显示一个。

这是我正在研究的一个:http://jsfiddle.net/trajano/SMT9D/,我认为它在某个地方

$('#accordions').on('hide', function (event) {
  console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})

【问题讨论】:

    标签: twitter-bootstrap accordion twitter-bootstrap-3


    【解决方案1】:

    Bootstrap-5 解决方案

    $(this).on('mouseenter', function (e) {
        if( !$(this).hasClass('collapsed')) {
            $(this).attr('data-bs-toggle','disabled');
        }
    })
    $(this).on('mouseleave', function (e) {
        if( !$(this).hasClass('collapsed')) {
            $(this).attr('data-bs-toggle','collapse');
        }
    })
    

    希望对安德烈亚斯有所帮助

    【讨论】:

      【解决方案2】:

      引导程序 5

      省略每个.accordion-collapse 上的data-bs-parent 属性,以使折叠项在打开另一个项时保持打开状态。

      【讨论】:

        【解决方案3】:

        这是一个简单的方法:

        引导程序 4

        $('.accordion .btn-link').on('click', function(e) { 
          if (!$(this).hasClass('collapsed')) { 
            e.stopPropagation(); 
          } 
        });
        

        来自 cmets 中的@mr_joncollette

        引导程序 3

        JsFiddle 用于 Bootstrap 3。

        Bootstrap 3 的代码:

        $('.panel-heading a').on('click',function(e){
            if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
                e.stopPropagation();
            }
            // You can also add preventDefault to remove the anchor behavior that makes
            // the page jump
            // e.preventDefault();
        });
        

        代码检查点击的元素是否是当前显示的元素(通过“in”类),如果确实有“in”类,则停止隐藏过程。


        已弃用的引导程序 2

        JsFiddle 用于 Bootstrap 2。

        Bootstrap 2 的代码:

        $('.accordion-toggle').on('click',function(e){
            if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
                e.stopPropagation();
            }
            // You can also add preventDefault to remove the anchor behavior that makes
            // the page jump
            // e.preventDefault();
        });
        

        注意: 如果您想在手风琴上附加更多点击事件,请小心,因为e.stopPropagation() 将阻止检查后发生的事件。 p>

        【讨论】:

        • 谢谢你!没有使用完全相同的解决方案,但 e.stopPropagation() 是我需要的!
        • 不错添加 e.preventDefault();在 if 语句之后,您的页面不会在点击时跳转
        • 非常感谢!
        • 漂亮 — 适用于 Bootstrap 4.5 $('.accordion .btn-link').on('click', function(e) { if (!$(this).hasClass('collapsed')) { e.stopPropagation(); } });
        【解决方案4】:

        所提供的解决方案均不允许在同一页面中拥有多个手风琴,无论是否打开一个 选项卡

        这是我的解决方案:

        $("[data-toggle=buttons][data-oneopen=true] [data-toggle=collapse]").on("click", function (e) {
          var me = $(this);
          var target = $(me.attr("data-target") || me.attr("href"));
          if (target.hasClass("show")) {
            e.stopPropagation();
          }
        });
        

        首先我选择了一个data-oneopen 属性来标记这些折叠按钮以启用此行为,但它可以替换为类或任何其他选择器。

        然后我检查data-targethref 属性以找到相关的tab

        最后我stopPropagation 如果该项目有show 类,只需将其更改为in 类以获得Bootstrap 3 的解决方案。

        【讨论】:

          【解决方案5】:

          我有一个不适合任何已发布答案的场景:同一页面上有多个手风琴,以及其他一些不是手风琴的可折叠组件(没有 data-parent 属性)。

          $("[data-toggle=collapse][data-parent]").click(function (e) {
              var button = $(this);
              var parent = $(button.attr("data-parent"));
              var panel = parent.find(button.attr("href") || button.attr("data-target"));
              if (panel.hasClass("in")) {
                  e.preventDefault();
                  e.stopPropagation()
              }
          });
          

          此代码仅在手风琴上触发,因为检查 data-parent 属性。 它也不假定 card(或引导程序 3 的 panel)结构,它使用与引导程序 api 相同的属性。

          希望对你有帮助。

          【讨论】:

            【解决方案6】:

            由于所有其他 JS 答案都使用 inadvisable stopPropagation(),这是我仅使用本机 Bootstrap 事件(在 Bootstrap 4 上测试)的解决方案。

            JsFiddle

            $('#accordionExample').on('show.bs.collapse', function () {
                $(this).data('isShowing', true);
            });
            
            $('#accordionExample').on('hide.bs.collapse', function (event) {
                if (!$(this).data('isShowing')) {
                    event.preventDefault();
                }
            
                $(this).data('isShowing', false);
            });
            

            它利用了点击折叠元素将导致show.bs.collapse后跟hide.bs.collapse这一事实。而点击打开的元素只会产生hide.bs.collapse

            【讨论】:

              【解决方案7】:

              2018 年更新

              以下是在 Bootstrap v3 或 v4 中至少保持打开状态的方法。这意味着打开的手风琴只能通过打开另一个手风琴来关闭

              引导程序 4

              https://www.codeply.com/go/bbCcnl0jBB

              // the current open accordion will not be able to close itself
              $('[data-toggle="collapse"]').on('click',function(e){
                  if ( $(this).parents('.accordion').find('.collapse.show') ){
                      var idx = $(this).index('[data-toggle="collapse"]');
                      if (idx == $('.collapse.show').index('.collapse')) {
                          e.stopPropagation();
                      }
                  }
              });
              

              另外,see this answer 展示了如何指定一个“默认”手风琴,当所有其他手风琴都关闭时,该手风琴将打开。


              引导程序 3

              $('[data-toggle="collapse"]').on('click',function(e){
                  if($(this).parents('.panel').find('.collapse').hasClass('in')){
                      var idx = $(this).index('[data-toggle="collapse"]');
                      var idxShown = $('.collapse.in').index('.accordion-body');
                      if (idx==idxShown) {
                          e.stopPropagation();
                      }
                  }
              });
              

              https://www.codeply.com/go/yLw944BrgA

              <div class="accordion" id="myAccordion">
                  <div class="panel">
                      <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
                      <div id="collapsible-1" class="collapse">
                          ..
                      </div>
                  </div>
                  <div class="panel">
                      <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
                      <div id="collapsible-2" class="collapse">
                          ..
                      </div>
                  </div>
                  <div class="panel">
                      <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
                      <div id="collapsible-3" class="collapse">
                         ...
                      </div>
                  </div>
              </div>
              

              注意: Bootstrap 3 到 make the accordion behavior work 需要 panel 类)

              【讨论】:

              【解决方案8】:

              引导 4.0

              $('.card').click(function(e) {
                if (
                  $(this)
                    .find('.collapse')
                    .hasClass('show')
                ) {
                  e.stopPropagation();
                }
              });
              

              此代码块检查点击的卡片是否折叠(通过查看类collapse 的div)。当卡当前为shown 时,它会停止propagating the event

              【讨论】:

              • 我建议 - 除了更好的样式 - 使用 .on("click", function...) 方式以确保它在第一次之后也能正常工作。
              【解决方案9】:

              根据 bootstarp 3.3.6 版本,just follow structure

              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
              
              <div class="panel-group" id="accordion" role="tablist"   aria-multiselectable="true">
              
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                      </a>
                    </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                      collopse 1 body  here 
                    </div>
                  </div>
                </div>
              
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                      </a>
                    </h4>
                  </div>
                  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                      collapse body 2
                    </div>
                  </div>
                </div>
              
              </div>
              
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

              【讨论】:

              • @Artistan 此解决方案工作正常。但它有效in conjunction the panel component。可折叠块必须是具有panel 类的块的子级。可以以this answer 为例。
              • @gleb-kemarsky 它没有。主题明确地说“保持一组打开”,而您的“解决方案”允许折叠唯一打开的一组“保持不打开”。
              • @kpull1 感谢您的澄清。题主遇到了什么困难,我好像误会了。
              【解决方案10】:

              或者您可以使用如下简单的 CSS 技巧:

              /*
              prevent the active panel from collapsing
               */
              .panel-group [aria-expanded=true]{
                /*
                http://caniuse.com/#feat=pointer-events
                Works for MOST modern browsers. (- Opera Mobile)
                */
                pointer-events: none;
              }
              

              必须在非活动面板链接上有适当的标签

               aria-expanded="false"
              

              【讨论】:

              • 它可以工作,但对于已经没有折叠的元素,它不会。仅在第二个动作中。
              【解决方案11】:

              我想准确地回答@Hugo Dozois 的答案

              http://jsfiddle.net/SMT9D/61/

              您应该添加e.preventDefault(); 如果您的页面中有滚动条,则可以防止# HTML 锚的默认行为

              $('.panel-heading a').on('click',function(e){
                  if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
                      e.preventDefault();
                      e.stopPropagation();
                  }
              });
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2011-12-03
                • 1970-01-01
                • 1970-01-01
                • 2013-03-15
                相关资源
                最近更新 更多