javascript - 用于将 Bootstrap 导航栏更改为移动 View 中的 Accordion 的 css

Question

我有这个 html 代码。

div class="container screen-only">

<ul class="nav nav-tabs customNavBars">

            <li class=" marginForFirstElement active" id="listEle1" onclick="changeActiveClass(this)">
                <a href="#" >
                    <div>
                    heading 1
                    </div>
                </a>
            </li>
            <li id="listEle2" class="" onclick="changeActiveClass(this)"> 
                <a href="#" >
                    <div>
                    heading 2
                    </div>
                </a>
            </li>
    </ul>

  </div>

 <div id="listEle1">
  content1
  </div>
   <div id="listEle2">
   content2
  </div>

以及相应的javascript代码，

  function changeActiveClass(val){
    var idForCheck = val.id;
      check = $( "#" +idForCheck ).hasClass( "active" );
    if(check == false){
       console.log("check == false")
       if(idForCheck == "listEle1"){
          $( "#" +idForCheck ).addClass( "active" );
          $( "#listEle2" ).removeClass( "active" );
          $("#paymentHistoryClass").css("display","block");
          $("#epayments").css("display","none");
     }
       else if(idForCheck == "listEle2"){
            $( "#" +idForCheck ).addClass( "active" );
           $( "#listEle1" ).removeClass( "active" );
           $("#paymentHistoryClass").css("display","none");
           $("#epayments").css("display","block");
        }

    }
  }

这段代码工作正常。但我希望选项卡在移动 View 中变成 Accordion ，即屏幕尺寸小于 992 像素。

在移动 View 中应该是这样的。

    -------------------------
    [      heading 1        ]
    -------------------------
    |                       |
    |       content1        |
    |                       |
    -------------------------


    -------------------------
    [      heading 2        ]
    -------------------------
    |                       |
    |       content2        |
    |                       |
    -------------------------

请向我提供 css 或 jscript 代码，以将选项卡转换为移动 View 中的 Accordion 。

非常感谢:)

Answer 1

使用 Bootstrap 选项卡折叠:https://github.com/flatlogic/bootstrap-tabcollapse

实现起来非常简单，不需要额外的代码。