0

こんにちは、私は Web プログラミングの初心者です (Web のみ!) ので、優しくしてください。ブートストラップを使用してサンプルアプリを構築しようとしています。私の興味は、ホバーしたときにナビゲーションリンクにドロップダウンメニューを表示できるようにしたいナビゲーションバーです。より具体的には、ナビゲーション リンクが通常どおりに動作する必要があります (クリックするとタブのコンテンツが表示されるなど) が、ホバーするとドロップダウン メニューが表示されます。ブースの 'data-toggle="tab"' と 'data-toggle="dropdown"' を使用できなくなりました。このサイトのおかげで、私はホバリング部分を行うことができました:しかし、ドロップダウンメニューを表示することに固執しています。前もって感謝します。

私のHTMLコード:

<div class="container">    <!------- Container start --------->
    <div class="row">
        <div class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand span2" href="#">Title</a>
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active"><a id="nav_callcen"  href="#t_link1" data-toggle="tab">Link1</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#t_link2" data-toggle="tab">Link2</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#t_link3" data-toggle="tab">Link3</a></li>
                        <li class="divider-vertical"></li>
                        <li class ="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#t_link4" >Link4*</a>
                                <ul class="dropdown-menu" >
                                    <li><a id="link1" tabindex="-1" href="#">Link1</a></li>
                                    <li><a id="link2" tabindex="-1" href="#">Link2</a></li>
                                </ul>
                        </li>
                     </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div id="appContent" class="tab-content">

                <div class="tab-pane active" id="t_link1">
                    <p>This is Link1</p>
                </div>   
                <div class="tab-pane" id="t_link2">
                    <p>This is Link2</p>
                </div>    
                <div class="tab-pane" id="t_link3">
                    <p>This is Link3</p>
                </div>    
                <div class="tab-pane" id="t_link4">
                    <p>This is Link4</p>
                </div>    

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

</div> <!------- Container end --------->

CSS:

ul.nav li.dropdown:hover > ul.dropdown-menu{
    margin: 0;
    display: block;    
}

a.menu:after, .dropdown-toggle:after {
  content: none;
}

JS:

$('.dropdown').on('click', 'li', function(event) {
        $("a[href=#t_"+event.target.id+"]").tab('show');
});
4

0 に答える 0