启动响应菜单-选项卡进入选择列表

Question

有没有办法停止将选项卡包装并转换为经过某个断点的单个下拉菜单？

感谢javascript将需要做繁重的工作。我似乎在网上找不到合适的例子。

有人能给我指正确的方向吗？

感谢

Answer 1

这是一个工作演示，在小而全页面长度的代码片段集上运行：

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown-menu").on("click", "a", function () {             
                     $('#myTabs a[href="#' + $(this).attr("class") + '"]').tab('show');               
                });
            });
        </script>
    <div class="container">
            <!--Visible only in mobile or xtra small devices-->
            <div class="dropdown visible-xs">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Menu
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="home">Home</a></li>
                    <li><a class="profile">profile</a></li>
                    <li><a class="messages">messages</a></li>
                    <li><a class="settings">settings</a></li>
                </ul>
            </div>
            <!-- Nav tabs visible only in medium and larger devices-->
            <ul class="nav nav-tabs visible-lg visible-md" role="tablist" id="myTabs">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content ">
                <div role="tabpanel" class="tab-pane active" id="home">Home</div>
                <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
                <div role="tabpanel" class="tab-pane" id="messages">Message</div>
                <div role="tabpanel" class="tab-pane" id="settings">Setting</div>
            </div>
        </div>