1

我试图弄清楚如何使这种淡入淡出效果仅在我将鼠标悬停在父 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>
4

2 回答 2

4

使用这个选择器：

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

代替：

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

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

虽然，我喜欢使用：

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

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

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

演示：http: //jsfiddle.net/MdfHB/

参考：

于 2013-04-25T05:55:50.840 回答
0

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

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

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

于 2013-04-25T05:56:33.337 回答