Question

问候StackOverflow-ians。我有点蠢，我希望你们中的一些人可以提供帮助，如果不是至少指出我正确的方向。

我有简单的嵌套UL导航，并且使用jQuery来隐藏/显示点击，鼠标悬停或鼠标移出的子菜单。工作正常。

问题出在这里：我构建它引用了jQuery 1.8.3，但它仍然在仍然引用jQuery 1.7.1的页面上运行。（我不能只在这些页面上更新lib。）

我可以对我的语法进行简单的更改，还是需要从头开始？

这是我正在使用的代码：

HTML （我继承了这段代码，并且无法更改。）

<ul class="mainNav">
<li><span>Categories</span>
    <ul class="subNav">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2 yay!</a></li>
    </ul>
</li>
<li><span>Resources</span>
    <ul class="subNav">
        <li><a href="#">more links</a></li>
        <li><a href="#">many much links</a></li>
    </ul>
</li>
</ul>

JS

$(function() {

$(".mainNav").on('click mouseenter  mouseleave', '> li', function() {
    if (!($(this).find('.subNav').hasClass('showNav'))) {
        $('.showNav').removeClass('showNav');
        $(this).find('.subNav').addClass('showNav');
    } else {
        $(this).find('.subNav').removeClass('showNav');
    }
});
});

See it in JSFiddle

Answer 1

只需更改选择器：

$(".mainNav").on('click mouseenter  mouseleave', '> li', function() {

要：

$(".mainNav > li").on('click mouseenter  mouseleave', function() {

它应该有用..

Here's your fiddle modified

请注意，由此您丢失了动态添加的li的事件绑定..但如果您的列表是静态的，那么这应该没问题。

Answer 2

问题似乎是动态元素选择器，在1.7中它似乎不喜欢选择器开头的>。

所以试试

$(function () {

    $(".mainNav").on('click mouseenter  mouseleave', 'li:has(ul.subNav)', function () {
        if (!($(this).find('.subNav').hasClass('showNav'))) {
            $('.showNav').removeClass('showNav');
            $(this).find('.subNav').addClass('showNav');
        } else {
            $(this).find('.subNav').removeClass('showNav');
        }
    });

});

演示：Fiddle

Answer 3

如果我没有记错的话，＆＃34; .on＆＃34;早期版本中不存在功能。＆＃34; .live＆＃34;正在被弃用但仍应在两个版本中运行。它也可能是＆＃34;＆gt;李＆＃34;需要成为主选择器的一部分。那部分对我来说也有点不合适。

切换jQuery库时，简单的隐藏/显示导航中断

3 个答案: