Не закрывается меню
Добрый день. У меня есть меню, которое открывается и закрывается по клику на одну кнопку. И также может закрыться если нажать не в блок выдвинутого меню.
Но проблема вот в чем, когда я нажимаю на блок который выдвинулся, и после него нажимаю не копку закрыть, а просто жму в любое место то меню уже назад не задвигается, это как то не удобно. Подскажите как мне исправить это? Вот песочницаhttp://jsfiddle.net/342swr8m/5/ P.s Строго за код не судите, я в этом деле новичок. Заранее спасибо за помощь =) |
Закрытие по клику вне блока
byM,
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script> <style type='text/css'> .sidebar_open-icons { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; border-radius: 50%; cursor: pointer; float: left; height: 44px; text-align: center; width: 44px; cursor: pointer; } .sidebar_open-icons:hover { background-color: #f4f4f4; } #navbar_open-left { background-color: #eee; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.07) inset; display: inline; height: 200px; left: -50%; min-width: 260px; position: absolute; top: 64px; z-index: 2; transition: left .5s; } #navbar_open-left.visible { left: 0; } </style> <script> $(function () { var keyOpen = $('#navbar_open'), navBar = $('#navbar_open-left'); keyOpen.click(function (e) { navBar.toggleClass("visible") e.preventDefault() }); $(document).click(function (e) { if (!$(e.target).closest("#navbar_open, #navbar_open-left").length ) navBar.removeClass("visible") }); }); </script> </head> <body> <div class="sidebar_open-wrap"> <div class="sidebar_open-icons" id="navbar_open">=) click me</div> <div class="sidebar-left" id="navbar_open-left"></div> </div> </body> </html> |
вы же сами написали:
$(document).click(function (e) { if ((e.target || e.srcElement) !== keyOpen[0] && !flag) navBar.removeClass("visible") }); и navBar[0].onclick=function(e){ flag=!0; } т.е. после нажатия на navBar переменная flag становится равной true и условие: (e.target || e.srcElement) !== keyOpen[0] && !flag не выпоняется |
Спасибо за помощь =)
|
Часовой пояс GMT +3, время: 19:43. |