jquery mouseenter mouseout 在菜单中答案

【问题标题】：jquery mouseenter mouseout in menujquery mouseenter mouseout 在菜单中
【发布时间】：2012-03-04 09:37:57
【问题描述】：

我遇到了一些 jquery menu mouseenter 问题。鼠标进入p，p还是display block怎么解决？

<script>
$(document).ready(function() {
    $('a').mouseenter(function(){
        $('p').css('display','none');
        $(this).next('p').slideDown('slow');
    }).mouseleave(function(){
        $('p').slideUp('slow');
    });
    $('p').mouseenter(function(){
        $(this).css('display','block');
    });
});
</script>
<div>
    <a>menu1</a>
    <p>about us</p>
    <a>menu2</a>
    <p>contact</p>
</div>
<style>
div{
    position:relative;
    z-index:0; 
    width:600px;
    height:20px;    
}
p{
    display:none;
    position:absolute;
    top:20px;
    left:0;
    width:300px;
    height:100px;
    background:#ccc;
}
</style>

现场演示：http://jsfiddle.net/KTvf7/

【问题讨论】：

标签： jquery mouseout mouseenter

【解决方案1】：

给你修好了..

  $('a').mouseenter(function(){
    $('p').css('display','none');
    $(this).next('p').slideDown('slow');});
$('p').mouseleave(function(){
    $('p').slideUp('slow');
});
$('p').mouseenter(function(){
    $(this).css('display','block');
});

【讨论】：

(1) $('p').mouseenter(function(){ $(this).css('display','block'); $(this).show(); }); 不执行任何操作（p 已被阻止并且可见，否则您无法输入）。 (2) 如果用户从a 元素离开菜单，p 仍会显示。
我会同意你的...我的仓促错误.. $(this).show();在上面的代码中没用

【解决方案2】：

最好以其他方式构建菜单，例如：

    <ul class="menu">
        <li>item
            <ul>
                <li>sub item</li>
                <li>sub item</li>
                <li>sub item</li>
            </ul>
        </li>
    </ul>

并将.menu li ul { display: none; } 添加到 css 中。

在这种结构中，进入和离开.menu > li 效果很好。

如果你仍然想坚持你的结构，你只能将mouseleave附加到容器上。我在这个fiddle给了它一个类.menu：

$('.menu a').mouseenter(function(){
    $('.menu p').css('display', 'none');
    $(this).next('p').slideDown('slow');
})

$('.menu').mouseleave(function(){
    $('p', this).slideUp('slow');
});

【讨论】：

【解决方案3】：

为什么不使用<ul>？我认为这对你想要做的事情更好。

html：

<ul>
    <li>
        <a href="#">Menu One</a>
        <p>About Us</p>
    </li>
    <li>
        <a href="#">Menu Two</a>
        <p>Contact Us</p>
    </li>    
</ul>

css：

li { float: left; padding: 0 2em; }
p {
    height: 100px;
    background: red;
    padding: 0 2em;
    display: none;
    position: absolute;
}

jQ：

$('li').hover(function(){
    $(this).find('p').stop(true, true).slideDown();
}, function(){
    $(this).find('p').stop(true, true).slideUp();
});

示例

jsFiddle

【讨论】：