Question

我正试图弄清楚如何将这种淡化效果发生在我将鼠标悬停在父LI上时，但当我将鼠标悬停在下拉列表中的项目上时，它似乎淡入淡出？

任何想法???

我在这里尝试过一堆例子，但我似乎无法想象我的生活，它真的开始让我烦恼！

谢谢大家！

<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>

Answer 1

使用此选择器：

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

而不是：

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

（显然，适用于其他地方的同一选择器）

虽然，我喜欢使用：

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

它只选择<li>元素中的子.myMenu元素。

此外，由于奇怪的冒泡问题，有必要使用mouseenter和mouseleave事件。

DEMO： http://jsfiddle.net/MdfHB/

参考文献：

Answer 2

像这样：http://jsfiddle.net/dtbaf/1/

  $('.myMenu > li').on('mouseenter', openSubMenu);
  $('.myMenu > li').on('mouseleave', closeSubMenu);

仅选择li类的直接子myMenu。还可以使用.mouseenter()和.mouseleave()事件..

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

2 个答案: