Question

我有一个下拉菜单;当我点击我想要显示子菜单的项目时，如果我在另一个菜单上单击或模糊，它应该通过删除下拉类来删除以前的子菜单。但它不起作用。

的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>

Answer 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');
            }
        }
    });

});

fiddle表示完整性

Answer 2

试试这个

see demo

 $('.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');
     }
 });

Answer 3

如果我说得对，这可能是解决方案：

$('.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课程中所有span的所有menu_item课程。

如果您只需关闭之前的drop-down，则需要从$(this)开始，由相应的选择器选择它。

编辑：

现在我明白你在做什么！您需要选择要关闭下拉菜单的所有元素（部分，div），除了您希望添加drop-down类的元素（在您的情况下为$('.menu_item > li')）。为此，添加另一个jQuery单击函数并相应地更改选择器：

$('div').not('.menu_item li').click(function(){
        $('.menu_item .drop-down').removeClass('drop-down');
});

jQuery下拉问题

3 个答案: