Повозился сегодня немного, забавно но мне не удалось добится вменяемой работы с вложенными элементами от mouseOut. При переходе между вложенными элементами, событие упорно срабатывает.Блин обидно
.
Пришлось писать костыль проверяющий действительно ли мы вышли за границы контейнера.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#list {
position: relative;
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
overflow:hidden;
display:none;
// display:block;
}
</style>
</head>
<body>
<div id="conteiner">
<!-- заголовок и меню, это два независимыз обьекта в контейнере(невложены один в другой) -->
<div id="caption">я заголовок</div>
<div id="list" >
<ul>
<li> строка1</li>
<li> строка2</li>
<li> строка3</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$("#caption").click(function(){
$("#list").show();
$("#caption").hide();
// событие mouse out
$("#list").mouseout(function(f){
// найдём list один раз, сбережём время
var list=$(this);
// позволим выполнить действие если мышь действительно за границами блока
if (f.pageX>list.width() || f.pageY>list.height() ||
f.pageX<list.offset().left || f.pageY<list.offset().top){
// скрываем меню
$(list).hide();
// показываем заголовок
$("#caption").show();
// отвяжем событие, чтобы несрабатывало по напрасну
$(list).unbind("mouseout");
}
});
});
});
</script>
</body>