jQuery open/dicht ul element
Als je op de ID #OPM klikt dan wordt er een var aangemaakt van de target zodat je weet welke class geopend moet worden, als er een ID met #CFM openstaat wordt die eerst gesloten en dan wordt de juiste class geopend.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function(){
$('#OFM').click(function(){
// Class die ik wil openen
var class = '.'+$(this).attr('target');
// Eerst alles met ID CFM sluiten
$('#CFM').slideUp().delay(500);
// De aangeklikte class openen
$(class).slideToggle();
});
});
</script>
$(function(){
$('#OFM').click(function(){
// Class die ik wil openen
var class = '.'+$(this).attr('target');
// Eerst alles met ID CFM sluiten
$('#CFM').slideUp().delay(500);
// De aangeklikte class openen
$(class).slideToggle();
});
});
</script>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<li><a id="OFM" target="navi">Open/Dicht</a></li>
<ul class="navi" id="CFM"><li>Links</li></ul>
<li><a id="OFM" target="provincie">Open/Dicht</a></li>
<ul class="provincie" id="CFM"><li>Links</li></ul>
<ul class="navi" id="CFM"><li>Links</li></ul>
<li><a id="OFM" target="provincie">Open/Dicht</a></li>
<ul class="provincie" id="CFM"><li>Links</li></ul>
Gewijzigd op 26/04/2015 21:22:45 door Ferdi R
Gewijzigd op 26/04/2015 21:25:12 door Wouter J
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function(){
$('.OFM').click(function(){
// Class die ik wil openen
var class = '.'+$(this).attr('target');
// Eerst alles met ID CFM sluiten
$('.CFM').slideUp().delay(500);
// De aangeklikte class openen
$(class).slideToggle();
});
});
</script>
$(function(){
$('.OFM').click(function(){
// Class die ik wil openen
var class = '.'+$(this).attr('target');
// Eerst alles met ID CFM sluiten
$('.CFM').slideUp().delay(500);
// De aangeklikte class openen
$(class).slideToggle();
});
});
</script>
Welke error krijg je in je JavaScript console? (F12 of Ctrl + Shift + J)
Foutmelding is weg, het klapt nu weer open en dicht.
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
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
<script type="text/javascript">
$(function(){
$('.OFM').click(function(){
var target = '.' + $(this).attr('target');
//$('.CFM').slideUp();
if($('.CFM').is(':visible'))
{
$('.CFM').slideUp('slow');
//return false;
}
if($(target).is(':visible'))
{
$(target).slideUp('slow');
return false;
}
else
{
$(target).slideDown('slow');
return false;
}
});
});
</script>
$(function(){
$('.OFM').click(function(){
var target = '.' + $(this).attr('target');
//$('.CFM').slideUp();
if($('.CFM').is(':visible'))
{
$('.CFM').slideUp('slow');
//return false;
}
if($(target).is(':visible'))
{
$(target).slideUp('slow');
return false;
}
else
{
$(target).slideDown('slow');
return false;
}
});
});
</script>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<li><a class="OFM" target="navi">Open/Dicht</a></li>
<ul class="navi CFM"><li>Links</li></ul>
<li><a class="OFM" target="provincie">Open/Dicht</a></li>
<ul class="provincie CFM"><li>Links</li></ul>
<ul class="navi CFM"><li>Links</li></ul>
<li><a class="OFM" target="provincie">Open/Dicht</a></li>
<ul class="provincie CFM"><li>Links</li></ul>
Toevoeging op 26/04/2015 22:50:09:
EDIT:
Thnx Wouter.
Toevoeging op 27/04/2015 11:41:52:
Nu zit ik met het volgende probleem, Ik maak in de CSS gebruik van media queries. Als het scherm te klein wordt dan verander ik het menu (display: none) naar een link die je kan openklappen met jQuery.
Als je het scherm (van mobiel) verticaal hebt en geen gebruik maakt van de link om het menu open te klappen en het scherm kantelt naar horizontaal dan komt het normale menu te voorschijn, maar als je wel gebruik maakt van de link en het scherm dan kantelt komt het menu niet te voorschijn.
Toevoeging op 27/04/2015 16:06:10:
Twee dingen die niet werken.
1 - De 'var content' vult zich op, dus hoe vaker ik klik hoe meer text er in komt te staan. Ik probeer de 'var content' te legen maar dat lukt niet.
2 - Als ik .text() verander naar .html() dan werkt het niet meer. Er wordt geen html opgehaald.
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 type="text/javascript">
$(function(){
$('.OFM').click(function(){
//var content = null;
//delete window.content;
//content = undefined;
//delete this.content;
var content = '';
var target = '.'+$(this).attr('target')+'.CFM';
var content = $(target).text();
var vullen = '.'+$(this).attr('target')+'.content'+'.CFM';
if($('.content.CFM').is(':visible'))
{
$('.content.CFM').slideUp('slow');
}
if($(vullen).is(':visible'))
{
$(vullen).slideUp('slow');
}
else
{
$(vullen).slideDown('slow').text(content);
return false;
}
});
});
</script>
$(function(){
$('.OFM').click(function(){
//var content = null;
//delete window.content;
//content = undefined;
//delete this.content;
var content = '';
var target = '.'+$(this).attr('target')+'.CFM';
var content = $(target).text();
var vullen = '.'+$(this).attr('target')+'.content'+'.CFM';
if($('.content.CFM').is(':visible'))
{
$('.content.CFM').slideUp('slow');
}
if($(vullen).is(':visible'))
{
$(vullen).slideUp('slow');
}
else
{
$(vullen).slideDown('slow').text(content);
return false;
}
});
});
</script>
Gewijzigd op 27/04/2015 11:35:48 door Ferdi R