Hi, I have this problem: there is a button, when clicked, the drop-down menu opens and closes. If the cursor leaves the field of a button or menu for more than 0.7 seconds, it closes itself.

All this works, but with one drawback: if the menu is opened with buttons 2 times in a row, then it closes, even when you return the cursor to the menu or button field. Tell me, please, possible solutions, thank you in advance.

Here is the code:

<!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 answer 1

    maybe so:

     <!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>
    • Thanks for the example, but then the menu cannot be folded with the? Button. I am new to jquery and maybe my version is not the most successful. I mean that it is possible to implement it and otherwise leave the idea, the menu collapses and turns around with a button and disappears, but not immediately but when the cursor leaves the menu or button. - Ya-sergey
    • Slightly redid your answer with the flag and everything became as it should. Thank you again. Rearranged if (flag) - lower in the code. // Действия на возвращение пользователя. // }); // if (flag){ // flag = false; - Ya-sergey