2

現在、メニューリンクにカーソルを合わせると、最初のレベルにあるすべてのサブメニューが表示されます。何が悪いのかわかりません。コードを参照してください。

    $('#menu li').hover(function () {
        //show its submenu
        $('ul', this).slideDown(100);

    }, function () {
        //hide its submenu
        $('ul', this).slideUp(100);
    });

私の意見では、リンクにカーソルを合わせるとこの最初のサブメニューのみが表示されるため、非常にうまく機能するはずです。しかし、この最初のリンクのサブメニューもホバーで直接表示されますが、それを修正する方法はまだわかりません.

助けが必要です。

理解を深めるために、ここでフィドルを作成しました。

4

4 に答える 4

7

ホバー関数のセレクターは、要素ulの子孫であるすべての要素を見つけていliます。直接の子のみを表示したい。代わりにこれを試してください：

$('#menu li').hover(function() {
    //show its submenu
    $(this).children('ul').slideDown(100);

}, function() {
    //hide its submenu
    $(this).children('ul').slideUp(100);
});
于 2013-05-08T13:00:42.527 に答える
0

ulメニューのレベルごとに異なるクラスを使用して、サブメニューのレベルごとに分ける必要があります。

コードを変更するだけの場合は、次の変更を試してみてください。

//show its submenu
$('ul', this).eq(0).slideDown(100);
于 2013-05-08T13:05:53.660 に答える
0

表示するリストを指定する必要があります。$(this)コンテキストとして使用して<ul>内部を検索し、:first疑似セレクターで結果をフィルタリングします。

hoverInとhoverOutイベントの両方で次のようなことを試してください。

$("#menu").on('hover', 'li', function(e){
    // $(this) refers to the <li> being hovered
    $(this).find('ul:first').slideToggle(100);
});

on()およびslideToggle()メソッドのドキュメントを参照してください。

于 2013-05-08T13:05:57.107 に答える
0

サブメニューを保持している<ul>には、サブサブメニューも含まれています。したがって、最初のリストを表示すると、そのリストに含まれるすべての要素も自動的に表示されます。

于 2013-05-08T13:02:48.467 に答える