Закрытие меню при отведении мыши
Есть вот такая вот кнопка, которая открывает скрытый div:
<input type="button" class="butprof" value="Меню"> <div class="menu_body"> <ul class="pro" > <li><a href="#"> Добавить видео</a></li> <li><a href="#"> Мой профиль</a></li> <li><a href="#"> Cообщения (0)</a></li> <li><a href="#"> Выйти</a></li> </ul> </div> И сам скрипт, который ее открывает
<script type="text/javascript">
$(document).ready(function () {
$("div.menu_body li:even").addClass("alt"); $('.butprof').click(function () {
$('div.menu_body').slideToggle('medium'); });
});
</script>
Так вот мне нужно, чтобы при отведении мыши от открытого меню оно закрывалось, делал вот так:
$('ul.pro').mouseout(function () {
$('div.menu_body').hide(); });
Меню сразу закрывается при отведении от 1 пункта меню, а мне нужно от всей области, помогите исправить. |
Цитата:
|
|
bohdantheone, как вариант...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.menu_body {
display:none;
padding:5px;
width:154px;
margin-left:2px;
border: 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("div.menu_body li:even").addClass("alt");
$('.butprof').click(function () {
$('div.menu_body').slideToggle('medium');
});
$('.pro').mouseover(function () {
$('.menu_body').unbind('mouseout');
$('.menu_body').mouseout(function () {
var e=event.target||event.srcElement;
if ($(e).parents('.menu_body').length==1) {
return
};
$('div.menu_body').hide();
$('.menu_body').unbind('mouseout');
});
});
});
</script>
</head>
<body>
<input type="button" class="butprof" value="Меню">
<div class="menu_body">
<ul class="pro" >
<li><a href="#"> Добавить видео</a></li>
<li><a href="#"> Мой профиль</a></li>
<li><a href="#"> Cообщения (0)</a></li>
<li><a href="#"> Выйти</a></li>
</ul>
</div>
</body>
</html>
|
ksa,
спасибо работает, но с багом: когда открывается меню и листать вниз по пунктам и вывести за пределы области мышь, то все норм, но если навести мышь на пункт меню, а потом повести мышей влево или вправо, вот здесь и баг - меню не закрывается и дальше не знает как себя вести, то откроется, то закроется. |
Цитата:
|
Цитата:
http://jsfiddle.net/3448m/1/ разницу посмотрите на http://api.jquery.com/mouseleave/ там внизу есть тестовый пример |
ksa,
может из-за браузера, Pavel M. спасибо, действительно работает без проблем. |
Цитата:
|
ksa,
в хроме работает через раз |
| Часовой пояс GMT +3, время: 00:03. |