2

私はjQueryの初心者で、ドロップダウン機能を使用してコツをつかもうとしていTwitter-Bootstrapますが、「Google」をクリックしても何もドロップダウンしませんli。なぜ機能しないのかかなり混乱していたので、Bootstrap Web サイトのサンプル ドロップダウンメニューのコードから自分のコードに何かを投げ込み始めました。これは、不要と思われるコードの説明になります。

これが私のjsFiddleです。

jQuery:

$(document).ready(function() {
    $('dropdown-toggle').click(function() {
        $(this).dropdown();
    });   
    $('li a').hover(function() {
        $(this).toggleClass("hover");
    });    
});

HTML:

<div id="container">
    <ul class="nav">
        <li class="dropdown">
            <a id="drop1" class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Google</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                <li>
                    <a href="www.google.com">Google</a>
                </li>
                <li>
                    <a href="www.gmail.com">Gmail</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="www.facebook.com">Facebook</a>
        </li> 
    </ul>
</div>

ドロップダウン メニューが機能しないのはなぜですか?

副次的な質問: ナビゲーション メニューliのスタイルを設定して、それぞれの上にカーソルを置いたときに背景色が変わらないようにしましたが、テキストは明るい灰色になります。Bootstrap にリンクした後、ホバリングすると背景色が白に、テキストの色が青に変わります。なんで？

4

2 に答える 2

2

いくつかのこと。ドロップダウンを設定した方法では、開くためにクリック トリガーは必要ありません。また、ドロップダウンが開いていましたが、スクロールに表示されていました。いくつかの変更を加えることで、それを機能させることができます。

.nav {
    overflow:visible; /*Changed from auto*/
}

#container {
    background-color:#333333;
    width: 100%;
    margin:auto;
    background-image: -moz-linear-gradient(top, rgb(34, 34, 34), rgb(17, 17, 17));
    display:inline-block; /*Added this to get your background color to get applied*/
}

デモ

dropdown-toggle@Zenithが述べたように、セレクターが間違っていたとしても、クリックイベントを安全に削除できます。Bootstrap はdata-toggle="dropdown"、マークアップを使用してそれを処理します。

2 番目の質問について。ブートストラップ スタイルはスタイルをオーバーライドします。したがって、これらのスタイルを適用します。

これを使用する代わりに.hover : BS スタイルをオーバーライドするには:-

.nav>li>a.hover, .nav>li>a:focus {
    color:#C9C9C9;
    background-color:#333333;
}

フルデモ

また、おそらく必要ありません

 $('li a').hover(function () {
        $(this).toggleClass("hover");
    });

代わりに、次の方法で処理できます。

.nav>li>a:hover, .nav>li>a:focus {
        color:#C9C9C9;
        background-color:#333333;
    }
于 2013-05-31T23:15:21.617 に答える
0

フレームワークと拡張機能の下のフィドルに jquery を追加してから、外部リソースの下にhttp://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.jsと入力し、プラス アイコンをクリックします。

#nav の overflow:auto を削除すると、実際にはほとんどの JavaScript を削除できます。クリックすると nav がドロップダウンされ、スタイルを整える必要があることがわかります。

于 2013-05-31T23:34:00.760 に答える