Mam problem z dwoma elementami
1. Chce, aby elementy <li> oznaczone klaską class="active", żeby te elementy się nie zwijały.
2. Sprawdzam, czy dane element ma dzieci, jednak nie zawsze strona jest przekierowywana na adres linku gdy nie ma tych dzieci
Struktura menu:
Kod
<ul>
<li><a href="index.php?param=1">1</a>
<ul class="active">
<li><a href="index.php?param=1_1">1.1</a></li>
<li><a href="index.php?param=1_2">1.2</a></li>
</ul>
</li>
<li><a href="index.php?param=2">2</a>
<ul>
<li><a href="index.php?param=2_1">2.1</a></li>
<li><a href="index.php?param=2_2">2.2</a>
<ul>
<li><a href="index.php?param=2_2_1">2.2.1</a></li>
<li><a href="index.php?param=2_2_2">2.2.2</a></li>
<li><a href="index.php?param=2_2_3">2.2.3</a></li>
<li><a href="index.php?param=2_2_4">2.2.4</a></li>
<li><a href="index.php?param=2_2_5">2.2.5</a></li>
<li><a href="index.php?param=2_2_6">2.2.6</a></li>
<li><a href="index.php?param=2_2_7">2.2.7</a></li>
<li><a href="index.php?param=2_2_8">2.2.8</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="index.php?param=3">3</a></li>
</ul>
<li><a href="index.php?param=1">1</a>
<ul class="active">
<li><a href="index.php?param=1_1">1.1</a></li>
<li><a href="index.php?param=1_2">1.2</a></li>
</ul>
</li>
<li><a href="index.php?param=2">2</a>
<ul>
<li><a href="index.php?param=2_1">2.1</a></li>
<li><a href="index.php?param=2_2">2.2</a>
<ul>
<li><a href="index.php?param=2_2_1">2.2.1</a></li>
<li><a href="index.php?param=2_2_2">2.2.2</a></li>
<li><a href="index.php?param=2_2_3">2.2.3</a></li>
<li><a href="index.php?param=2_2_4">2.2.4</a></li>
<li><a href="index.php?param=2_2_5">2.2.5</a></li>
<li><a href="index.php?param=2_2_6">2.2.6</a></li>
<li><a href="index.php?param=2_2_7">2.2.7</a></li>
<li><a href="index.php?param=2_2_8">2.2.8</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="index.php?param=3">3</a></li>
</ul>
Kod
$(document).ready(function(){
// Szybkość animacji.
var speed = 200;
// Domyślnie zwijamy wszystkie listy oraz podkreślamy te punkty, które listy podrzędne (i ustwiamy rodzaj kursora).
$('li ul').css('display', 'none').parent().children('a:first-child').css('text-decoration', 'underline').css('cursor', 'hand');
// Punkt główny: obsługa kliknięcia - zwijanie i rozwijanie list.
$('li').click(function() {
var $kids = $(this).children('ul').children();
var len = $kids.length;
if (len > 0) {//jeśli są dzieci
alert('Dzieci: ' + len + ' - ROZWIJAMY');
$(this).children('ul').toggle(speed);
return false;
} else {
alert('Dzieci: ' + len + ' - PRZENOSIMY');
return true;
}
});
});
// Szybkość animacji.
var speed = 200;
// Domyślnie zwijamy wszystkie listy oraz podkreślamy te punkty, które listy podrzędne (i ustwiamy rodzaj kursora).
$('li ul').css('display', 'none').parent().children('a:first-child').css('text-decoration', 'underline').css('cursor', 'hand');
// Punkt główny: obsługa kliknięcia - zwijanie i rozwijanie list.
$('li').click(function() {
var $kids = $(this).children('ul').children();
var len = $kids.length;
if (len > 0) {//jeśli są dzieci
alert('Dzieci: ' + len + ' - ROZWIJAMY');
$(this).children('ul').toggle(speed);
return false;
} else {
alert('Dzieci: ' + len + ' - PRZENOSIMY');
return true;
}
});
});
Będe wdzięczny za pomoc przy rozwinięciu tego skryptu, utknęłem w tych dwóch punktach
-------------- EDIT --------------
Udało mi się rozwiązać pierwszy problem. Dodałem kawałek .not('.active'):
Poprawiona linijka wygląda następująco:
$('li ul').not('.active').css('display', 'none').parent().children('a:first-child').css('text-decoration', 'underline').css('cursor', 'hand');