4

複数のレベルを持つ単純な水平ナビゲーションバーを作成しようとしています（ただし、今のところ、1つのサブレベルを持つナビゲーションバーしか作成していません）。私はここでいくつかの変更を加えてこのチュートリアルに従っています：

<ul id = "sample2">
    <li>
        <a href="#">About Us</a>
        <ul>
            <li><a href="#">Website</a></li>
            <li><a href="#">Creator</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Our Products</a>
        <ul>
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Just give us money</a></li>
        </ul>
    </li>
    <li>
        <a href="#">FAQs</a>
        <ul>
            <li><a href="#">What is this?</a></li>
            <li><a href="#">Why should I care???</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>
        <ul>
            <li><a href="#">Telephone</a></li>
            <li><a href="#">Mobile Phone</a></li>
            <li><a href="#">E-mail</a></li>
        </ul>
    </li>
    <li><a href="#">Login</a></li>
</ul>

メインで1つのIDのみを使用し、それらのクラスを使用する代わりに、を使用し<ul>てサブレベルにアクセスしています。#sample2 ul

ただし、JQueryコードを使用すると機能しません。

$(function () {
    $('#sample2 ul').each(function () {
        $(this).parent().eq(0).hover(function () {
            $('#sample2 ul:eq(0)', this).show(100);
            }, function () {
            $('#sample2 ul:eq(0)', this).hide(100);
        });
    });
});

繰り返しますが、チュートリアルの.dropdownクラスをに変更しただけ#sample2 ulです。

ただし、チュートリアルと同じ方法（つまり、サブレベルにIDまたはクラスを割り当てる）を実行すると機能しますが、これらのサブ<ul>はcssセレクターを使用して選択できるため、不要だと思います。

私は何が間違っているのですか？それらのサブレベルは、実際には、割り当てられたクラス/ IDを使用してのみ選択できますか？

4

5 に答える 5

1

編集：今回それを手に入れました、そして私はそれをテストしたのでこれがうまくいくことを知っています、以下はあなたが必要とするjsです：

$(function () {
    $('#sample2 ul').each(function () {
        $(this).parent().children('a').eq(0).hover(function () {
            $(this).parent().children('ul').show(100);
            }, function () {
            $(this).parent().children('ul').hide(100);
        });
    });
});
于 2012-04-26T16:23:25.227 に答える
1

#sample2 ul<UL>IDsample2の要素の子である要素を取得することを意味します。

あなたが探しているのはul#sample2セレクターとしてです。つまり、<UL>IDsample2を持つ要素を取得します。

于 2012-04-26T16:19:05.727 に答える
1

これにはjqueryは本当に必要ありません。少し単純なCSSを使用すると、目的の結果が得られます。

​ul#sample2 li ul
{
    display:none;
}
​ul#sample2 li:hover ul
{
    display:block;
}​​​

-デモを見る-

編集：これは3レベルの例です：

-3レベルのデモ-

于 2012-04-26T16:19:16.443 に答える
1

これでうまくいくはずです。 jsFiddle

$(function () {
    $('#sample2').on('hover', 'li', showSubMenu);
    $('#sample2').on('mouseleave', hideSubMenus);
});

function showSubMenu(){
    $(this).siblings().children('ul').hide(100);
    $(this).children('ul').show(100);
}
function hideSubMenus(){
    $(this).find('ul').hide(100);
}

編集：jQueryとセレクター（特にコンテキストを持つセレクターなど）の使用方法について混乱しているようです$(selector, context)。

あなたの例では、＃sample 2の子孫である$('#sample2 ul')すべてを選択します。ulそれぞれに同じホバー効果を追加したい場合ul、$('#sample2 ul').hover(handler)またはそれ$('#sample2 ul').on('hover', handler)を実行します。問題は、非表示のアイテムにカーソルを合わせることができないことです。したがって、本当に必要なのは、li＃sample2の下を選択し、ハンドラーをホバーイベントにアタッチすることです。

ホバーイベントハンドラー内で、セレクターを使用します$('#sample2 ul:eq(0)', this)。そのセレクターの「this」は、#sample2 ul:eq(0) が検索されるコンテキストを提供します。イベントハンドラーで、thisそのイベントに関連付けられている要素を参照します。この場合、カーソルを合わせliます。Eq（0）はセレクターの引用符の中には配置されないため、原則として、jQueryセレクターの一部として使用しないでください。#sample2のコンテキスト内に要素がなく、セレクターの形式が正しくないthisため、空のjQueryオブジェクト（何も選択されていない）が返されます。ハンドラーに必要なのは。これは、現在ホバーされているliの直接の子になります。:eq(0)$('#sample2 ul:eq(0)', this)$(this).children('ul')ul

于 2012-04-26T16:50:39.573 に答える
0 
$('#sample2 > li').hover(
function() {
   // show
   $('ul', this).show(100);
},
function() {
  // hide
  $('ul', this).hide(100);
});

デモ

于 2012-04-26T16:20:26.927 に答える