Javascript jQuery在下拉菜单中仅选择父li_Javascript_Jquery_Html

Javascript jQuery在下拉菜单中仅选择父li

javascript jquery html

Javascript jQuery在下拉菜单中仅选择父li,javascript,jquery,html,Javascript,Jquery,Html,我试图找出如何使这种淡入淡出的效果只发生在我悬停在父母李的，但它似乎淡入淡出时，我在下拉列表中的项目悬停太多有什么想法吗我在这里尝试了大量的例子，但我似乎一辈子都无法理解这一点，这真的开始困扰我了谢谢大家 <style type="text/css"> /*style the main menu*/ .myMenu { margin:0; padding:0; } .myMenu li { list-style:none; float:lef

我试图找出如何使这种淡入淡出的效果只发生在我悬停在父母李的，但它似乎淡入淡出时，我在下拉列表中的项目悬停太多

有什么想法吗

我在这里尝试了大量的例子，但我似乎一辈子都无法理解这一点，这真的开始困扰我了

谢谢大家

<style type="text/css">

/*style the main menu*/
.myMenu {
    margin:0;
    padding:0;
}

.myMenu li {
    list-style:none;
    float:left;
    font:12px Arial, Helvetica, sans-serif #111;
}

.myMenu li a:link {
    display:block;
    text-decoration:none;
    background-color:#09F;
    padding: 0.5em 2em;
    margin:0;
    border-right: 1px solid #fff;
    color:#111;
}

.myMenu li a:hover {
    background-color:#0CF;  
}

/*style the sub menu*/
.myMenu li ul {
    position:absolute;
    display: none;
    border-top:1px solid #fff;
    margin:0;
    padding:0;
}

.myMenu li ul li {
    display:inline;
    float:none;
}

.myMenu li ul li a:link, .myMenu li ul li a:visited {
    background-color:#09F;
    width:auto;
}

.myMenu li ul li a:hover {
    background-color:#0CF;  
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $('.myMenu li').on('mouseover', openSubMenu);
        $('.myMenu li').on('mouseout', closeSubMenu);

        function openSubMenu() {
            $(this).find('ul').fadeIn()
        };

        function closeSubMenu() {
            $(this).find('ul').fadeOut();   
        };

});
</script>

</head>

<body>
<ul class="myMenu">
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a>
        <ul>
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            <li><a href="#">sub menu item 3</a></li>
            <li><a href="#">sub menu item 4</a></li>
        </ul>
    </li>
    <li><a href="#">menu item 3</a>
       <ul>
            <li><a href="#">sub menu item 1</a></li>
            <li><a href="#">sub menu item 2</a></li>
            <li><a href="#">sub menu item 3</a></li>
            <li><a href="#">sub menu item 4</a></li>
        </ul>
    </li>
    <li><a href="#">menu item 4</a></li>
    <li><a href="#">menu item 5</a></li>
</ul>

</body>
</html>

使用此选择器：

$('.myMenu > li').on('mouseover', openSubMenu);

而不是：

$('.myMenu li').on('mouseover', openSubMenu);

显然，应用于其他位置的相同选择器

尽管如此，我还是喜欢使用：

$('.myMenu').children('li').on('mouseover', openSubMenu);

它仅从.myMenu元素中选择子元素

此外，有必要使用mouseenter和mouseleave事件，因为存在奇怪的冒泡问题

演示：

参考资料：

使用此选择器：

$('.myMenu > li').on('mouseover', openSubMenu);

而不是：

$('.myMenu li').on('mouseover', openSubMenu);

显然，应用于其他位置的相同选择器

尽管如此，我还是喜欢使用：

$('.myMenu').children('li').on('mouseover', openSubMenu);

它仅从.myMenu元素中选择子元素

此外，有必要使用mouseenter和mouseleave事件，因为存在奇怪的冒泡问题

演示：

参考资料：

像这样：

它只选择myMenu类的直接子lis。还可以使用和事件..

如下所示：

它只选择myMenu类的直接子lis。

同时使用和事件..

这不起作用，我已经试过了，当你在它们之间切换时，子菜单会淡入淡出。这不起作用，我已经试过了，当你在它们之间切换时，子菜单会淡入淡出。这似乎不起作用？当我在子菜单中悬停LI时，它仍然会淡入淡出？@user2218028抱歉，将事件更改为mouseenter和mouseleave。一开始我没看到，但mouseover和mouseleave对人有奇怪的影响descendants@user2218028我用这些信息更新了我的答案，并添加了一个带有我解释过的所有更改的演示，它似乎起作用了。这似乎不起作用？当我在子菜单中悬停LI时，它仍然会淡入淡出？@user2218028抱歉，将事件更改为mouseenter和mouseleave。一开始我没看到，但mouseover和mouseleave对人有奇怪的影响descendants@user2218028我用这些信息更新了我的答案，并添加了一个演示，其中包含了我解释过的所有更改，而且似乎有效