Форум

onuvidelsolnce · #1 (**permalink**) 14.04.2013, 23:15

На странице имеется 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();
    });

Как объеденить два кода что бы второй не нарушил работы первого, а лишь дополнилнял его... Спасибо.

bret · #2 (**permalink**) 15.04.2013, 00:40

Как-то так оно должно работать:

$(document).ready(function () {

	$(document).click( function(event) {
		if( $(event.target).closest("элемент_блоксворачивается /разворачивается").length ) {
			$("элемент_блоксворачивается /разворачивается").slideToggle('normal');
			event.stopPropagation();
		} else {
			$("элемент_блоксворачивается /разворачивается").fadeOut("slow");
		}
		return;
	});
	
});

onuvidelsolnce · #3 (**permalink**) 15.04.2013, 12:10

bret, не работает. Блок перестал разворачиваться...

Вот сделал мою ситуацию в песочнице.. Еще раз поворюсь хотелось бы что бы при развернутом div он сворачивался при щелчке в любом мечсте страницы

http://learn.javascript.ru/play/UemUKb

И для этого нужно истользовать след. код

$(document).click( function(event){
      if( $(event.target).closest("элемент_блоксворачивается /разворачивается").length ) 
        return;
      $("элемент_блоксворачивается /разворачивается").fadeOut("slow");
      event.stopPropagation();
    });

bret · #4 (**permalink**) 15.04.2013, 12:25

http://jsfiddle.net/br3t/Htfwp/
Если необходимо, чтобы клик внутри дива не закрывал его - добавляйте дополнительные условия

onuvidelsolnce · #5 (**permalink**) 15.04.2013, 12:57

bret, О! почти то что нужно. Только одно но... При щелчке на самом развернутом div он тоже сворачивается...

bret · #6 (**permalink**) 15.04.2013, 13:33

Сообщение от bret

Если необходимо, чтобы клик внутри дива не закрывал его - добавляйте дополнительные условия

см. выше

Hekumok · #7 (**permalink**) 15.04.2013, 13:35

<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>

Форум

Справочник

Discord чат

Курсы javascript