0

Привет, у меня такая проблема: есть кнопка, при нажатие на которую открывается и закрывается выпадающее меню. Если курсор уходит из поля кнопки или меню более чем на 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>

1 ответ 1

0

может так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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 секунды)

var _flag = true;

    $('#sort_link').click(function() {

    if (_flag){
    _flag = false;
    $('#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;

_flag = 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>
2
  • Спасибо за пример, но ведь тогда меню нельзя сворачивать кнопкой ?. Я новичок в jquery и возможно мой вариант не самый удачный это я к тому что возможно это можно реализовать и по другому главное оставить идею, меню сворачивается и разворачивается кнопкой и ичезает, но не сразу а при уходе курсора с элементов меню или кнопки.
    – Ya-sergey
    19 апр 2012 в 23:10
  • Немного переделал ваш ответ с флагом и все стало, как надо. Ещё раз спасибо вам. Переставил if (flag) - ниже в коде. // Действия на возвращение пользователя. // }); // if (flag){ // flag = false;
    – Ya-sergey
    19 апр 2012 в 23:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.