使用导航选项卡li tab在移动设备上下拉

Question

如何在下拉框中关闭或折叠所有导航标签li并在点击移动设备上的标签li时工作？

喜欢这张图片：

小提琴示例：Here

 @media (max-width: 767px) {
     .foot-hd {
         background: #5899d4;
         color: #fff;
         float: left;
         margin-bottom: 0;
         padding: 10px;
         width: 100%;
     }
     .foot-hd > a {
         background: #fff;
         cursor: pointer;
         padding: 2px 7px;
         text-decoration: none;
     }
     .bottom-menu2 {
         padding: 0;
     }
     .bottom-menu2 ul {
         float: left;
         margin: 0;
         padding: 0;
         width: 100%;
     }
     .bottom-menu2 > .nav-tabs > li {
         margin-bottom: 0;
         margin-right: 0;
         max-width: 100%;
         min-height: 100%;
         padding: 0;
         text-align: center;
         width: 100%;
     }
     .bottom-menu2 > .nav-tabs > li > a {
         background: #5491e3;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         color: #fff;
         float: left;
         padding: 10px;
         width: 100%;
     }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<h4 class="foot-hd visible-xs ">TAB LIST<a class="pull-right fa fa-angle-down" data-target=".bottom-menu2" data-toggle="collapse" type=""></a></h4>
<div id="bs-example-navbar-collapse-4" class="bottom-menu2 navbar-collapse collapse" role="navigation" aria-expanded="false" style="height: 1px;">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a>
        </li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a>
        </li>
    </ul>
</div>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
    </div>
</div>
<script>
 

 $(".nav-tab li").click(function(){
    	$("#bs-example-navbar-collapse-4").removeClass("in");
     }); 

</script>

我现在在这里找到了解决方案。你可以通过run snippet看到..