0

ドロップダウン メニューがあります。サブメニューを表示したいアイテムをクリックすると、別のメニューをクリックまたはぼかすと、ドロップダウンクラスを削除して前のサブメニューを削除する必要があります。しかし、うまくいきません。

jQuery

$('.menu_item > li ').click(function(){
    $('.menu_item .drop-down').removeClass();
    $(this).find('span').addClass('drop-down');
});

$('.menu_item .drop-down').blur(function(){
    $('.menu_item .drop-down').removeClass();
    return false;
});

HTML

<nav id="menu_wrap" class="container">
    <a href="index.php" class="logo"></a>
    <a href="#" id="select_menu" class="active" onclick="open_menu()">Menu</a>
    <ul class="menu_item">
        <li><input type="text" placeholder="Search in here" class="search"></li>
        <li><a href="#">Top Lists</a></li>
        <li><a href="#">Shops</a></li>
        <li><a href="#">Products</a>
            <span>
            <a href="#">Products</a>
            <a href="#">Products</a>
            <a href="#">Products</a>
            <a href="#">Products</a>
            </span>
        </li>
        <li><a href="Signup.php">Create Account</a></li>
        <li><a href="Login.php">Log in</a></li>
    </ul>
</nav>
4

3 に答える 3

1

これを試して

デモを見る

 $('.menu_item li').click(function() {
     $('.menu_item .drop-down').removeClass();
     $(this).find('span').addClass('drop-down');

 });

 $('.menu_item li').mouseleave(function() {
     if ($(this).find('span').length > 0) {
         $(this).find('span').removeClass('drop-down');
     }
 });
于 2012-08-09T10:39:22.777 に答える
1

これを行うためのよりクリーンな方法があるに違いないと確信していますが、これはあなたが説明したシナリオで機能します

$(document).ready(function() {

    $(document).click(function(e) {
        var $target = $(e.target);
        $('.menu_item .drop-down').removeClass();
        if ($target.parents().is('.menu_item > li')) {
            $target.parent().find('span').addClass('drop-down');
            if ($target.parent().is('span')) {
                $target.parent().addClass('drop-down');
            }
        }
    });

});​

そして、完全性のためのフィドル

于 2012-08-09T09:48:13.560 に答える
0

私があなたを正しければ、これが解決策かもしれません：

$('.menu_item > li ').click(function(){
    $('ul.menu_item li span').removeClass('drop-down');
    $(this).find('span').addClass('drop-down');
});

$('.menu_item .drop-down').blur(function(){
    $('ul.menu_item li span').removeClass('drop-down');
    return false;
});

これにより、クラス内のすべてdrop-downからすべてのクラスが削除されます。spanmenu_item

以前のものだけを閉じる必要がある場合はdrop-down、から始まる適切なセレクターで選択する必要があります$(this)。

編集：

今、私はあなたが何をしているのか分かります！drop-downクラスを追加したいものを除いて、ドロップダウンメニュー（セクション、div）を閉じたいすべての要素を選択する必要があります（あなたの場合：） $('.menu_item > li')。このために、別の jQuery クリック関数を追加し、それに応じてセレクターを変更します。

$('div').not('.menu_item li').click(function(){
        $('.menu_item .drop-down').removeClass('drop-down');
});
于 2012-08-09T09:26:54.437 に答える