javascript - 实现垂直选项卡时出现下拉菜单问题(Twitter Bootstrap)

Question

我尝试在 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>

Answer 1

我认为您的选项卡需要包裹在 <form> 中<ul>内的容器(而不是在 anchor 内部)。这样你就不需要 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