| |
|
|
| | Здравствуйте, вообщем прошу вашей помощи/подсказки:
есть ":hidden" блок (css display:none), есть кнопка при нажатии на которую он появляется (toggle или slideDown/Up)
вот он появился, и если повторно нажать на кнопку, скроется
вопрос: как сделать что бы при клике за областью повившегося блока и всех в него вложенных элементов, сработало событие скрытия? знаю вариант с появлением слоя маски, но он не очень нравится, с jquery только знакомлюсь, поперебирал что знаю, не получилось. | |
| |
|
|
| |
|
|
| |
для: extonec
(29.07.2010 в 20:04)
| | |
$(function(){
var elem = document.getElementById('elem'); // получаем элемент, клики вне которого будем отслеживать
var handler = function(event){ // функция-обработчик клика вне элемента
if(
elem != event.target // если клик произошёл не по элементу
&&
!$.contains(elem, event.target) // и не по его дочернему элементу
){
alert('Событие "click" вне элемента #elem');
$(document).unbind('click', handler); // удаляем обработчик
}
};
$(document).bind('click', handler); // этот обработчик цепляем на документ, когда показываем элемент
});
|
| |
| |
|
|
| |
|
|
| |
для: sms-send
(30.07.2010 в 00:47)
| | | Надо клик по документу обрабатывать. | |
| |
|
|
| |
|
|
| |
для: sms-send
(30.07.2010 в 00:47)
| | | нет, видимо Вы, немного не так поняли.
пример наглядный :
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="none">
<title>Заголовок страницы</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if($("ul").is(":hidden")) {
$("ul").slideDown(200);
}
else {
$("ul").slideUp(200);
}
});
});
</script>
<style type="text/css">
.wrap-elems { width:100px; margin:40px auto; border:solid 1px #ccc; padding:20px 0 20px 30px;}
ul { padding:0; list-style:none; display:none;}
</style>
</head>
<body>
<!--необходимо: когда появился скрытый список, мы можем кликнуть в любое место внутри него (взамодействие с содержимым), если мы кликаем на кнопку список исчезает, если мы кликаем в любую точку, вне блока wrap-elems (впринципе можно отталкиваться от того что есть только кнопка и только список, как удобнее) список сворачивается.-->
<div class="wrap-elems">
<button>Button</button>
<ul>
<li><a href="">Link first</a></li>
<li><a href="">Link second</a></li>
<li><a href="">Link third</a></li>
</ul>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: extonec
(31.07.2010 в 03:21)
| | | Я видимо именно так и понял. Более того, при совмещении кода из моего примера и вашего кода, всё работает точно так, как вы описываете в комментарии, я проверял. | |
| |
|
|
| |
|
|
| |
для: sms-send
(31.07.2010 в 05:04)
| | | да действительно работает, вчера пробывал (только вместо document.getElementById) делал привязку $(".wrap-elems"), видимо плохо знаю/понимаю разницу между коллекцией jquery и DOM элементом
большое спасибо за помощь и Ваше время. | |
| |
|
|
