jquery - jQuery下拉问题

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

});​

和完整性的小提琴

Answer 2

试试这个

看演示

 $('.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 click 函数并相应地更改选择器：

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