I met some jquery menu mouseenter problem. How to fix when mouse enter p , the p still 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>
Live demo: http://jsfiddle.net/KTvf7/
Fixed it for ya..
ReplyDelete$('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');
});
It's better to structure your menu otherwise, like:
ReplyDelete<ul class="menu">
<li>item
<ul>
<li>sub item</li>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
</ul>
And add .menu li ul { display: none; } to the css.
In this structure, entering and leaving the .menu > li works great.
If you still want to stick to your structure, you can only attach mouseleave to the container. I gave it a class .menu in this fiddle:
$('.menu a').mouseenter(function(){
$('.menu p').css('display', 'none');
$(this).next('p').slideDown('slow');
})
$('.menu').mouseleave(function(){
$('p', this).slideUp('slow');
});
Why don't you use a <ul>? I think it's better for what you're trying to do.
ReplyDeletehtml:
<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();
});
Example
jsFiddle