javascript - 切换 jQuery 库时，简单的隐藏/显示导航被破坏

Question

向 StackOverflow 的同胞们问好。我有点进退两难，希望你们中的一些人能够提供帮助，如果不能的话，至少为我指明正确的方向。

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

问题是:我引用 jQuery 1.8.3 构建了它，但它在仍然引用 jQuery 1.7.1 的页面上完全起作用。 (而且我不能只更新这些页面上的库。)

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

这是我正在使用的代码:

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

问题似乎是动态元素选择器，在 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