Forum PHP.pl > [jQuery] Ukrycie elementu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

sytluk

13.05.2012, 15:36:34

Witam, posiadam taki prosty kod który po kliknięciu w link otwiera i zamyka na zmianę diva:

[HTML] pobierz, plaintext 
$('div.pole').hide();
 
$('a.przycisk').toggle(function(){
	$('div.pole').show();
}, function(){
	$('div.pole').hide();
});
[HTML] pobierz, plaintext

Niestety div ukrywa się jedynie po kliknięciu w link, jak zrobić, aby div ukrywał się zawsze, kiedy klikniemy poza jego obszar?

d3ut3r

13.05.2012, 16:07:30

[JAVASCRIPT] pobierz, plaintext 
$(document).click(function() {
    $('div.pole').hide();
});
[JAVASCRIPT] pobierz, plaintext

pczeglik

14.05.2012, 17:19:28

Hej,

Ja bym to zrobił w taki oto sposób:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .content {padding:20px;height:200px;background:#CCC;}
        .pole {display:none;}
    </style>
</head>
<body>
	<div class="content">
		<a href="#" class="przycisk">kliknij mnie</a>
		<div class="pole">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
		</div>
	</div>  
	<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
	<script type="text/javascript">
		(function($){
			"use strict";
 
			var content = $('.content'),
				przycisk = $('.przycisk'),
				pole = $('.pole'),
				poleVisible = false;
 
			przycisk.on('click', function() {
				pole.toggle();      
				poleVisible = true;
				return false;        
			});
 
			pole.on('click', function(e) {
				e.stopPropagation();
				return false;
			});
 
			content.on('click', function() {
				if (poleVisible) {
					pole.hide();
					poleVisible = false; 
				}           
				return false;
			});
		}(jQuery));
	</script>  
</body>
</html>
[HTML] pobierz, plaintext

Za '.content' możesz sobie wstawić np. 'body'

Możesz zobaczyć jak to działa i czy o to Ci chodzi tutaj: jsFiddle

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.