Script start ongevraagd.
ik heb een javascript ingebouwd in mijn website. Dit javascript is gebaseerd op jquery ziet er als volgt uit:
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
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
$(document).ready(function() {
var sm; // submenu
var delay = 500; // delay before applying changes
var tID; // timeout id
var oPrev;
$(this).parent().find("ul.submenu").hide();
$("ul.menu > li > a").mouseover(function() {
if (tID && $(this) === oPrev) {clearTimeout(tID);}
oPrev = $(this);
if(sm){sm.stop(true, true).fadeIn('slow');}
$(this).parent().find("ul.submenu").slideDown('normal', 'easeOutBack').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.submenu").slideUp('normal', 'easeOutBack' );
});
});
$('.submenu > li > a').hover(
function() {
if (tID) {clearTimeout(tID);}
oPrev.css('color',color_on);
$(this).stop(true, true).fadeIn('slow');
},
function() {
if (tID) {clearTimeout(tID);}
sm = $(this);
tID = setTimeout(
function() {
oPrev.css('color','');
}, delay);
}
);
});
var sm; // submenu
var delay = 500; // delay before applying changes
var tID; // timeout id
var oPrev;
$(this).parent().find("ul.submenu").hide();
$("ul.menu > li > a").mouseover(function() {
if (tID && $(this) === oPrev) {clearTimeout(tID);}
oPrev = $(this);
if(sm){sm.stop(true, true).fadeIn('slow');}
$(this).parent().find("ul.submenu").slideDown('normal', 'easeOutBack').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.submenu").slideUp('normal', 'easeOutBack' );
});
});
$('.submenu > li > a').hover(
function() {
if (tID) {clearTimeout(tID);}
oPrev.css('color',color_on);
$(this).stop(true, true).fadeIn('slow');
},
function() {
if (tID) {clearTimeout(tID);}
sm = $(this);
tID = setTimeout(
function() {
oPrev.css('color','');
}, delay);
}
);
});
In de HTML wordt dit als volgt opgeroepen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul class="menu">
<a href="index.php"><li>Home</li></a>
<a href="aboutus.php"><li>About us</li></a>
<li><a href="#">Solutions and Services</a>
<ul class="submenu" style="background-image: url(images/subback.png); background-repeat: no-repeat; margin-left: -20px;">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
<a href="index.php"><li>Home</li></a>
<a href="aboutus.php"><li>About us</li></a>
<li><a href="#">Solutions and Services</a>
<ul class="submenu" style="background-image: url(images/subback.png); background-repeat: no-repeat; margin-left: -20px;">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
Dit zou er dus voor moeten zorgen dat Solutions and services uitklapt op het moment dat ik erop sta. En dit werkt ook uitstekend. Maar, het is al uitgeklapt op het moment dat ik de pagina start. Als ik over Solutions and services ga, en er dan weer vanaf, dan klapt het submenu weer in, maar ik kan hem niet ingeklapt krijgen bij het starten van de pagina.
Suggesties?
Bij voorbaat dank :)
Gewijzigd op 18/01/2011 07:11:23 door Mart Oosterveld
$(this).parent() binnen een callback van $(document).ready(), waar slaat dat op?
Ik merk ook inconsistentie in je html.
soms gebruik je
'ul li a', soms ook 'ul a li'. Dit tweede zou ik vermijden.
Ik zou dat wat herschrijven, mocht ik jou zijn.
Thanx voor je reactie.
Ik heb dat scriptje van internet gehaald. Zelf ben ik geen ster in javascript.
de regel $(this).parent().find("ul.submenu").hide(); had ik toegevoegd, in de hoop dat dat het script zou stoppen, of verbergen (hide). Is niet gebeurd. Daarom die regel maar weggehaald.
http://martoosterveld.nl/jstest/
dat is het script. Je ziet, het werkt uitstekend, behalve het geval dat het by default al uitgeklapt is. Enige suggesties over hoe ik dit by default kan inklappen?
Gewijzigd op 19/01/2011 03:00:39 door Mart Oosterveld
Code (php)
1
$('#navigation ul li ul').hide();
is je oplossing.
of
Code (php)
1
$('#navigation ul.submenu').hide();
Thijs Damen op 19/01/2011 15:11:21:
is je oplossing.
of
Code (php)
1
$('#navigation ul li ul').hide();
is je oplossing.
of
Code (php)
1
$('#navigation ul.submenu').hide();
Bedankt Thijs :) Dit lost mijn probleem op. Het was inderdaad
Code (php)
1
$('#navigation ul.submenu').hide();
