切换jQuery libs时简单的hide/显示nav

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

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

演示：小提琴

Answer 2

只需从：

更改选择器

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

to：

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

它应该起作用..

这是您的小提琴修改

请注意，您将失去事件绑定为动态添加的li。但是，如果您的列表是静态的。

如果我没错，则" .on"功能在早期版本中不存在。" .live"正在弃用，但仍应在两个版本中运行。也许"> li"需要成为主要选择器的一部分。那部分对我来说也有些不利。