Сворачивание блока при клике в любом месте страницы
На странице имеется div который рзворачивается и сворачивается при клике на кнопку. Вот код(с использование jquery):
$(document).ready(function (){
$(" элемент_кнопка_скрыть/показать").click(function(){
$("элемент_блоксворачивается /разворачивается").slideToggle('normal');
return false
});
});
Хотелось бы что бы это div сворачивался(находясь в развернутом сосоянии) так же при клике в любом месте страницы, кроме щелчках внути него самого. Нашел код как это сделать:
$(document).click( function(event){
if( $(event.target).closest("элемент_блоксворачивается /разворачивается").length )
return;
$("элемент_блоксворачивается /разворачивается").fadeOut("slow");
event.stopPropagation();
});
Как объеденить два кода что бы второй не нарушил работы первого, а лишь дополнилнял его... Спасибо. |
Как-то так оно должно работать:
$(document).ready(function () {
$(document).click( function(event) {
if( $(event.target).closest("элемент_блоксворачивается /разворачивается").length ) {
$("элемент_блоксворачивается /разворачивается").slideToggle('normal');
event.stopPropagation();
} else {
$("элемент_блоксворачивается /разворачивается").fadeOut("slow");
}
return;
});
});
|
bret, не работает. Блок перестал разворачиваться...
Вот сделал мою ситуацию в песочнице.. Еще раз поворюсь хотелось бы что бы при развернутом div он сворачивался при щелчке в любом мечсте страницы http://learn.javascript.ru/play/UemUKb И для этого нужно истользовать след. код
$(document).click( function(event){
if( $(event.target).closest("элемент_блоксворачивается /разворачивается").length )
return;
$("элемент_блоксворачивается /разворачивается").fadeOut("slow");
event.stopPropagation();
});
|
http://jsfiddle.net/br3t/Htfwp/
Если необходимо, чтобы клик внутри дива не закрывал его - добавляйте дополнительные условия |
bret, О! почти то что нужно. Только одно но... При щелчке на самом развернутом div он тоже сворачивается...
|
Цитата:
|
<html><head>
<style>
#div {
width: 100px ;
height: 100px ;
background: green ;
display: none ;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
var div = $("#div") ;
div.on("click", false) ;
$("#click").on("click", function(e) {
div.slideDown() ;
e.stopPropagation() ;
}) ;
$(document).on("click", "body", function() {
div.slideUp() ;
}) ;
}) ;
</script></head><body>
<div id="div"></div>
<button id="click">CLICK ME</button>
</body></html>
|
| Часовой пояс GMT +3, время: 13:04. |