Jquery 不能使用 3 个选择器

Jquery can't use 3 selectors

本文关键字：选择器 不能 Jquery      更新时间：2023-09-26

我正在编写一个小脚本来制作移动菜单。

但是，我无法让我的选择器一起工作。

当我只有$('#nav_button, .nav li, .nav li li') #nav_button and .nav li工作时，但是当我删除.nav li并离开$('#nav_button, .nav li li')时，这个子菜单也开始工作。我也尝试使用具有相同结果的$('#nav_button, .nav li, .sub_menu li li')。

有人知道为什么吗？

jquery：

var mobileMenu = function () {
    var currentPosition = 'closed'
    $('#nav_button, .nav li, .nav li li').click(function() {
        if (currentPosition == 'closed') {
            $('.nav').addClass('open');
            currentPosition = 'open';
        }
        else {
            $('.nav').removeClass('open');
            currentPosition = 'closed';
        }
    });
};

.html：

<div id="head">
        <div class="container">
            <div class="cover"></div>
            <a href="#"><h1 class="logo pull-left">C<span class="logo_space">AV</span>O</h1>
            </a> <!-- end logo !-->
            <div id="nav_button"></div>
            <ul class="nav pull-right">
                <li><a href="#menu">Menu</a>
                    <ul class="sub_menu">
                        <li><a href="#">Starters</a></li>
                        <li><a href="#">Breakfast and Brunch</a></li>
                        <li><a href="#">Salads</a></li>
                        <li><a href="#">Sandwiches and Wraps</a></li>
                        <li><a href="#">Pasta</a></li>
                        <li><a href="#">Mains</a></li>
                        <li><a href="#">Pizza</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- end container !-->
    </div> <!-- end header !-->

首先，您的两个选择器匹配相同的元素

$('#nav_button, .nav li, .nav li li')

.nav li匹配.nav内的任何 LI，包括嵌套的 LI
.nav li li匹配内部.nav与另一个 LI 中的任何 LI，即嵌套 LI

换句话说，LI 元素内部的 LI 元素

，.nav 内部的 LI 元素匹配两次，但这应该无关紧要，因为 jQuery 删除了重复项，但这是不必要的。

真正的问题是事件传播，当您单击嵌套的

LI 时，会为嵌套的 LI 和父 LI 调用事件处理程序，因此单击处理程序执行两次，并且首先添加类，然后删除（反之亦然），因此没有可见的变化。

下面是一个简化的示例

小提琴

只是做 

$('#nav_button, .nav li')

应该足够了，但您必须添加event.stopPropagation()以确保在调用 LI 时事件不会传播到下一个父 LI，下面是一个示例

小提琴

$('#nav_button, .nav li').on('click', function(e) {
     e.stopPropagation();
     // do stuff
});

正如@adeneo在嵌套 li 函数中所说，将不必要地调用两次。我认为实现这一目标的另一种方法是将点击抓取器分为两个选择器，如下所示：

$('.nav').click(function() {
    if (currentPosition == 'closed') {
        alert('open');
        $('.nav').addClass('open');
        currentPosition = 'open';
    }
    else {
        alert('close');
        $(this).removeClass('open');
        currentPosition = 'closed';
    }
});
$('.nav > li > li').click(function() {
    if (currentPosition == 'closed') {
        alert('open');
        $(this).addClass('open');
        currentPosition = 'open';
    }
    else {
        alert('close');
        $('.nav').removeClass('open');
        currentPosition = 'closed';
    }
});

我写了一把小提琴来做你所期望的。请检查并评论是否有帮助。

http://jsfiddle.net/QMaster/y7d6osoq/

相关文章：