Question

我尝试在twitter bootstrap的下拉菜单中实现垂直标签，我的“垂直标签”和“下拉”代码完美地工作，但是当我尝试合并两者时，只显示标签页眉。（JSfiddle）

以下是“tab”，“下拉列表”和“带下拉列表”

的代码

下拉代码

<div class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">dropdown</a>
                      <ul class="dropdown-menu dropme1">
                        <li class="arrowdrop"><a href="#">Role Name, A-Z</a></li>
                        <li id = "a2z2"><a href="#">Role Name, Z-A</a></li>
                        <li id = "a2z3"><a href="#">Created on, Oldest first</a></li>
                        <li id = "a2z4"><a href="#">Created on, Newest first</a></li>
                        <li id = "a2z5"><a href="#">Last edited, Oldest first</a></li>
                        <li id = "a2z6"><a href="#">Last edited, Newest first</a></li>
                        <li id = "a2z7"><a href="#">Status, Ascending</a></li>
                        <li id = "a2z8"><a href="#">Status, Descending</a></li>
                       </ul>

垂直标签代码

<div class="tabbable verticaltabs-container">
        <ul class="nav nav-tabs ulfloatleft liremovefloat">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#profile" data-toggle="tab">Profile</a></li>
            <li><a href="#messages" data-toggle="tab">Messages</a></li>
            <li><a href="#settings" data-toggle="tab">Settings</a></li>
            <li><a href="#contact" data-toggle="tab">Contact</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <h3>Home</h3>

            </div>
            <div class="tab-pane fade" id="profile">
                <h3>Profile</h3>

            </div>
            <div class="tab-pane fade" id="messages">
                <h3>Messages</h3>

            </div>
            <div class="tab-pane fade" id="settings">
                <h3>Settings</h3>

            </div>
            <div class="tab-pane fade" id="contact">
                <h3>Contact</h3>

            </div>
        </div>
    </div>

下拉+垂直标签

 <div class="tabbable verticaltabs-container">
        <ul class="nav nav-tabs ulfloatleft liremovefloat">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#profile" data-toggle="tab">Profile</a></li>
            <li><a href="#messages" data-toggle="tab">Messages</a></li>
            <li><a href="#settings" data-toggle="tab">Settings</a></li>
            <li><a href="#contact" data-toggle="tab">Contact</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <h3>Home</h3>

            </div>
            <div class="tab-pane fade" id="profile">
                <h3>Profile</h3>

            </div>
            <div class="tab-pane fade" id="messages">
                <h3>Messages</h3>

            </div>
            <div class="tab-pane fade" id="settings">
                <h3>Settings</h3>

            </div>
            <div class="tab-pane fade" id="contact">
                <h3>Contact</h3>

            </div>
        </div>
    </div>


                <h3>Drop down with tab</h3>

                <div class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">dropdown</a>
                      <ul class="dropdown-menu ">
                        <li class="arrowdrop"><a href="#">

                  <div class="tabbable verticaltabs-container">
        <ul class="nav nav-tabs ulfloatleft liremovefloat">
            <li class="active"><a href="#home1" data-toggle="tab">Home</a></li>
            <li><a href="#profile1" data-toggle="tab">Profile</a></li>
            <li><a href="#messages1" data-toggle="tab">Messages</a></li>
            <li><a href="#settings1" data-toggle="tab">Settings</a></li>
            <li><a href="#contact1" data-toggle="tab">Contact</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="home1">
                <h3>Home</h3>

            </div>
            <div class="tab-pane fade" id="profile1">
                <h3>Profile</h3>

            </div>
            <div class="tab-pane fade" id="messages1">
                <h3>Messages</h3>

            </div>
            <div class="tab-pane fade" id="settings1">
                <h3>Settings</h3>

            </div>
            <div class="tab-pane fade" id="contact1">
                <h3>Contact</h3>

            </div>
        </div>
    </div>


                        </a></li>

                       </ul>

            </div>

Answer 1

我认为您的标签需要包含在<form>内的<ul>容器中（而不是锚内）。这样你就不需要jquery event.stopPropagation（）东西。

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
  <ul class="dropdown-menu ">
    <li class="arrowdrop"><a href="#">Tabs</a></li>
    <ul>
      <form>
      <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">One</a></li>
          <li><a href="#tab2" data-toggle="tab">Two</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab1">
            <p>Section 1...</p>
          </div>
          <div class="tab-pane" id="tab2">
            <p>Section 2...</p>
          </div>
        </div>
      </div>
      </form>
    </ul>
  </ul>
</div>

Demo

Answer 2

您的代码中需要纠正一些事项

下拉列表中的选项卡内容隐藏在选项卡标题后面，因此即使选项卡有效，您也不会看到它。

您可以添加这样的css以使其可见

.dropdown-menu .tab-content{
    padding-left:150px;
}

此外，您还需要通过添加以下内容来触发选项卡以使其在下拉列表中工作：

$('.dropdown .nav a').click(function (e) {
      $(this).tab('show');
    });

我在这里更新了你的jsfiddle - http://jsfiddle.net/paulitto/57frK/1/

此外，您可能需要更正标题页眉的样式以显示底部边框

实现垂直选项卡时的下拉问题（Twitter Bootstrap）

2 个答案:

Demo