0

ユーザーが「menuItem」にカーソルを合わせると、その特定の要素のサブメニューのみが表示されるメニューを作成しようとしています。

$(this) を使用できることはわかっていますが、jQuery で変更すると

$(subMenu).removeClass("hide-submenu").addClass("show-submenu");

に

$(this).removeClass("hide-submenu").addClass("show-submenu");

うまくいかないようです

var menuItem = $("nav > ul > li > a");

var subMenu = $("ul > li > ul");


$(subMenu).addClass("hide-submenu");

$(menuItem).hover(function(){
if($(subMenu).hasClass("hide-submenu")) {
        $(subMenu).removeClass("hide-submenu").addClass("show-submenu");
}
else {
        $(subMenu).removeClass("show-submenu").addClass("hide-submenu");
}
});

以下は私のHTMLです

<nav>
    <ul>
        <li>
            <a>MENU ITEM</a>
                <ul>
                    <li><a href="#">SUB ITEM 1</a></li>
                    <li><a href="#">SUB ITEM 2</a></li>
                    <li><a href="#">SUB ITEM 3</a></li>
                </ul>
        </li>

    </ul>
</nav>
4

4 に答える 4

1

Event が呼び出されているため$(this)、 が含まれているためです。$(menuItem)$(menuItem)

于 2013-07-26T11:16:55.140 に答える
0

使用する、

var menuItem = $("nav ul li a");
var subMenu = $("ul li ul");

それ以外の

var menuItem = $("nav > ul > li > a");
var subMenu = $("ul > li > ul");
于 2013-07-26T11:15:38.270 に答える
0

あなたのコードでは$(menuItem)、 を使用するときにの中にカーソルを合わせると、 ではなく をthis参照します。したがって、ここで使用したいように使用することはできません。代わりにこれを行うことができます：$(menuItem)$(subMenu)this

menuItem.hover(function () {

    // Go to the next sibling `ul` in the current scope, using `this`
    var $next = $(this).next('ul');  

    if ($next.hasClass("hide-submenu")) {
        $next.removeClass("hide-submenu").addClass("show-submenu");
    } else {
        $next.removeClass("show-submenu").addClass("hide-submenu");
    }
});

もう一つ：

var menuItem = $("nav > ul > li > a");

menuItemここではすでに jQuery オブジェクトになっているため、再度行う必要はありません$(menuItem)。についても同様subMenuです。

于 2013-07-26T11:17:07.417 に答える