0

Twitter ブートストラップのドロップダウン メニューに垂直タブを実装しようとすると、「垂直タブ」と「ドロップダウン」のコードは完全に機能しますが、両方をマージしようとすると、タブ ヘッダーのみが表示されます。( JSフィドル)

「タブ」、「ドロップダウン」、「ドロップダウン付きタブ」のコードは次のとおりです。

ドロップダウン コード

<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

タブは（アンカー内ではなく）内の<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 に答える