Klik buiten element controleren
De HTML is vergelijkbaar met iets als dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<ul id="dropdown">
<li>
<h3>Titel</h3>
</li>
<li>
<input type="text" />
</li>
<li>
<div>Inhoud</div>
<div>Nog meer inhoud</div>
</li>
</ul>
<li>
<h3>Titel</h3>
</li>
<li>
<input type="text" />
</li>
<li>
<div>Inhoud</div>
<div>Nog meer inhoud</div>
</li>
</ul>
Ik heb dus een link met een javascript event, als je daarop klikt opent de dropdown onder de link. Maar nu moet ik nog de dropdown kunnen sluiten als je ernaast klikt.
Een klik buiten de dropdown kan op 2 manieren worden bepaald: controleren of de target (doel) van het klik event binnen de dropdown is, of juist erbuiten.
Als er binnen wordt geklikt, hoeft er niks te gebeuren bij die muisklik. Als erbuiten wordt geklikt, weten we dat de dropdown moet sluiten.
Wat ik nu dus zoek is een manier om te controleren of een klik binnen of buiten een element is. Hier moet je wel bij opletten dat child elementen ook meedoen, dus als je bijvoorbeeld op de <h3> tag klikt, dan ziet javascript dit niet als een klik in de <ul>, maar op het element <h3> (waarbij de dropdown dus niet hoeft te sluiten)
Je moet dan dus weer kijken of dit element de <ul> als parent heeft.
Kan iemand me helpen? Heb echt al veel geprobeerd en gezocht.
Gewijzigd op 18/11/2013 20:34:17 door Mark Hogeveen
Code (php)
1
2
3
2
3
$('element').click(function(){
}).click(function(){
});
}).click(function(){
});
probeerde het wel zou werken maar tevergeefs.
Ik zou een element, onder de lightbox leggen, die het scherm laten innemen en een klik event daarop hangen. Een beetje hetzelfde concept als http://jsbin.com/isabad/2 maar dan met JavaScript ipv CSS
Misschien is het simpelste om een mask achter de dropdown te leggen, en dan een onclick op de mask (om te sluiten) en een onclick op de ul.
Overigens heb je dus in je jquery zowel parents als parent.
(Aan de css file kan je zien waar de code van komt)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://worldtourgear.nl/style.css" type="text/css" media="screen" />
<script>
$(function() {
// Clickable Dropdown
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
</script>
<div class="click-nav">
<ul class="no-js">
<li>
<a class="clicker">Brand</a>
<ul>
<li><a href="#">Bianchi</a></li>
<li><a href="#">BMC</a></li>
<li><a href="#">Cannondale</a></li>
<li><a href="#">Canyon</a></li>
<li><a href="#">Cervelo</a></li>
<li><a href="#">Trek</a></li>
</ul>
</li>
</ul>
</div>
<link rel="stylesheet" href="http://worldtourgear.nl/style.css" type="text/css" media="screen" />
<script>
$(function() {
// Clickable Dropdown
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
</script>
<div class="click-nav">
<ul class="no-js">
<li>
<a class="clicker">Brand</a>
<ul>
<li><a href="#">Bianchi</a></li>
<li><a href="#">BMC</a></li>
<li><a href="#">Cannondale</a></li>
<li><a href="#">Canyon</a></li>
<li><a href="#">Cervelo</a></li>
<li><a href="#">Trek</a></li>
</ul>
</li>
</ul>
</div>
---------------
En nog eentje van mezelf geschreven.
Hier ga ik echt in op je vraag. Via een truukje: met .hover() houden we bij of de muis binnen of buiten is; bij het klikken, wordt dat gewoon afgelezen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var mouseIn = false;
$(document).ready(function() {
var dropdown = $('#dropdown');
dropdown.hover(function(e) {
mouseIn = true;
},
function(e) {
mouseIn = false;
}
);
$(window).click(function(e) {
if (mouseIn == true) {
// click binnen
dropdown.addClass('expanded').removeClass('collapsed');
}
else {
// click uiten
dropdown.addClass('collapsed').removeClass('expanded');
// titel zichtbaar maken
dropdown.children().eq(0).css('display', 'block');
}
});
});
</script>
<style>
.collapsed > li {
display: none;
}
.expanded > li {
display: block;
}
</style>
</head>
<body>
<ul id="dropdown">
<li class="titel">
<h3>Titel</h3>
</li>
<li>
<input type="text" />
</li>
<li>
<div>Inhoud</div>
<div>Nog meer inhoud</div>
</li>
</ul>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var mouseIn = false;
$(document).ready(function() {
var dropdown = $('#dropdown');
dropdown.hover(function(e) {
mouseIn = true;
},
function(e) {
mouseIn = false;
}
);
$(window).click(function(e) {
if (mouseIn == true) {
// click binnen
dropdown.addClass('expanded').removeClass('collapsed');
}
else {
// click uiten
dropdown.addClass('collapsed').removeClass('expanded');
// titel zichtbaar maken
dropdown.children().eq(0).css('display', 'block');
}
});
});
</script>
<style>
.collapsed > li {
display: none;
}
.expanded > li {
display: block;
}
</style>
</head>
<body>
<ul id="dropdown">
<li class="titel">
<h3>Titel</h3>
</li>
<li>
<input type="text" />
</li>
<li>
<div>Inhoud</div>
<div>Nog meer inhoud</div>
</li>
</ul>
</body>
Gewijzigd op 22/11/2013 11:21:06 door Kris Peeters