Привет, у меня такая проблема: есть кнопка, при нажатие на которую открывается и закрывается выпадающее меню. Если курсор уходит из поля кнопки или меню более чем на 0.7 сек, оно само закрывается.
Всё это работает, но с одним недостатком: если меню открыть кнопкои 2 раза подряд, то оно закрывается, даже при возврате курсора в поле меню или кнопки. Подскажите, пожалуйста, возможные решения, заранее благодарю.
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style>
.tblock {
float: left;
line-height: 40px;
margin: 15px;
position: relative;
}
ul {
font-size: 1em;
line-height: 1.2;
list-style: none outside none;
}
#dt {
border:1px solid #444;
padding:4px;
position:absolute;
top:190px;
left:200px;
}
#sort_link {
border: 1px solid #FFFFFF;
border-radius: 3px;
position: relative;
}
ul#sort_list{min-width:145px;padding:11px 10px 0;top:32px;}
ul#sort_list li:last-child{margin-bottom:8px;}
a#sort_link{border:1px solid #eee;border-radius:3px;padding: 3px 15px; position:relative;}
#sort_link:hover{border:1px solid #cccccc;border-radius:3px;padding: 3px 15px;position:relative;}
#sort_link span{border-color:transparent;border-top:4px solid #ccc;display:none;border-style:solid;border-width:4px;height:0;position:absolute;right:5px;top:8px;width:0;}
#sort_link:hover span{display:block;}
#sort_list a{font-size:1em;}
#sort_list {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px;
box-shadow: 3px 3px 10px #C2C1C1;
display: none;
left: 0px;
padding: 5px 10px;
position: absolute;
top: 0px;
z-index: 1000;
}
</style>
<script>
$(function() {
idleTimer = null;
idleState = false; // состояние отсутствия
idleWait = 700; // время ожидания в мс. (1/1000 секунды)
$('#sort_link').click(function() {
$('#sort_list').slideToggle('slow');
$('#sort_list, #sort_link').mousemove(function() { // мышь над кнопкой
$('#dt').css("background","orange"); // детектор
clearTimeout(idleTimer); // отменяем прежний временной отрезок
if(idleState == true){
}
// Действия на возвращение пользователя.
});
$('#sort_list, #sort_link').mouseout(function(){ // мышь ушла с кнопки
$('#dt').css("background","green"); // детектор
idleState = false;
idleTimer = setTimeout(function(){
// Действия на отсутствие пользователя
$('#sort_list').css("display", "none");
$('#dt').css("background","red"); // детектор
$('#sort_link, #sort_list').unbind('mousemove mouseout');
idleState = true;
}, idleWait);
});
});
});
</script>
</head><body>
<div class="tblock">
<a href="#" id="sort_link">сортировать:</a>
<ul id="sort_list">
<li><a href="javascript://">По Дате</a></li>
<li><a href="javascript://">По Названию</a></li>
<li><a href="javascript://">По Рейтингу</a></li>
<li><a href="javascript://">По Переходам</a></li>
</ul>
</div>
<div id="dt">detector</div>
</body>
</html>