7

このブートストラップ ドロップダウンに遅延を追加する最も単純な方法を見つけようとしています... http://www.bootply.com/64074さまざまな方法とスクリプトを試しましたが、できないようです。マウスオーバー時に自動ドロップダウンを許可する css 行を追加しました。

            <!-- Top Nav -->
                    <div class="navbar hidden-phone well well-small">
                        <div class="navbar-inner header-drop-nav">

                    <!-- 1st dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Destination <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!--  1st Top Nav links -->
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 2nd dropdown -->
                    <ul class="nav nav-tabs pull-middle">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Activity <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!-- 2nd Top Nav links -->
                        <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 3rd dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Interest <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!-- 3rd Top Nav links -->
                        <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 4th dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Special Offers <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!-- 4th Top Nav links -->
                        <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <form class="navbar-form pull-right hidden-tablet">
                        <input class="span3" type="text" placeholder="Search">
                        <button type="submit" class="btn btn-primary">GoSeeDo</button>
                    </form>

                        </div>
                    </div>
4

3 に答える 3

1

後でこのスレッドに出くわした人のために..Bootstrap 3と互換性があり、ナビゲーションメニュー、ボタン、ボタングループなどで動作するこの素晴らしいプラグインをチェックしてください:

https://github.com/CWSpear/bootstrap-hover-dropdown

于 2014-11-04T23:34:19.350 に答える