0

我尝试在 twitter bootstrap 的下拉菜单中实现垂直选项卡，我的“垂直选项卡”和“下拉”代码完美运行，但是当我尝试合并两者时，只显示选项卡标题。（JSfiddle）

这是我的“选项卡”、“下拉菜单”和“带下拉菜单的选项卡”的代码

下拉代码

<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>
4

2 回答 2

1

我认为您的标签需要包裹在 a<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>

演示

于 2013-05-08T07:49:19.230 回答
1

您的代码中有几处需要更正

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

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

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

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

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

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

此外，您可能希望更正选项卡标题的样式以显示底部边框

于 2013-05-08T07:57:39.017 回答