Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][Jquery] Lista rozwijana.
Forum PHP.pl > Forum > Przedszkole
cykcykacz
Witam,
mam skrypt dzięki któremu rozwijam i zwijam listę:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. $( '#menu > li > ul' )
  3. .hide()
  4. .click(function( e ){
  5. e.stopPropagation();
  6. });
  7. $('#menu > li').toggle(function(){
  8. $(this).find('ul').slideDown();
  9. }, function(){
  10. $( this ).find('ul').slideUp();
  11. });
  12. });
[JAVASCRIPT] pobierz, plaintext

Kod html
  1. <ul id="menu">
  2. <li><a href="#">Co nowego?</a>
  3. <ul class="active">
  4. <li><a href="#">Specjalności tygodnia</a></li>
  5. <li><a href="#">Zdjęcia z ostatniej nocy!</a></li>
  6. <li><a href="#">Komentarze użytkowników</a></li>
  7. </ul>
  8. </li>
  9. <li><a href="#">Tylko dla członków</a>
  10. <ul>
  11. <li><a href="#">Największe gwiazdy</a></li>
  12. <li><a href="#">Monitoring 24/7</a></li>
  13. </ul>
  14. </li>
  15. </li>
  16. <li><a href="#">O nas</a>
  17. <ul>
  18. <li><a href="#">Ochrona prywatności</a></li>
  19. <li><a href="#">Regulamin strony</a></li>
  20. <li><a href="#">Kontakt</a></li>
  21. </ul>
  22. </li>
  23. </ul>


Fajnie rozwija sie zwija się.
Ale nie wiem jak zrobić żeby klikając na jedno drzewo reszta list była zwinięta?

Rozumiecie o co chodzi obecnie działa tak, klikam na "Co nowego?" lista rozwija się następnie klikam na "Tylko dla członków" lista rozwija się i mam dwie rozwinięte listy.
A chcę aby tylko jedna lista była rozwinięta. Czyli klikając na "Tylko dla członków" lista która wcześniej była rozwinięta "Co nowego?" zwineła się.
kropamk
Nie lepiej tak smile.gif ?

  1. $("#menu > li").click(function() {
  2. $(this).find("ul").slideToggle("slow");
  3. });
  4. </script>
cykcykacz
nie działa.
kropamk
nie działa po pewnie nie dałeś stylu jeszcze wink.gif

o to i on:
  1. <style type="text/css">
  2. #menu ul { display: none;}
  3. </style>
cykcykacz
Nie nie działa tutaj mam link do mojego przykładu http://jsfiddle.net/cykcykacz/tAUS7/3/ próbowałem dodać tak jak piszesz ale nie wypaliło.
kropamk
Nie wiem jak Tobie ale u mnie działa ten skrypt nawet na jsfiddle. Używam chrome. I to jest Twój skrypt.

Zerknij na mój - działa.

http://jsfiddle.net/Ms3SG/
cykcykacz
Tak działa ale chyba źle wytłumaczyłem jak chciał bym żeby działał.
Są tam 3 listy i możemy każdą rozwinąć a ja chcę widzieć tylko jedną rozwiniętą resztę schowanych.
zbychoCom
Chyba chodzi Ci o to: http://ferrante.pl/examples/jquery/jQuery_3a.html
nospor
No to poprostu chowaj sasiadow.

http://jsfiddle.net/Ms3SG/1/
cykcykacz
Ja znalazłem takie rozwiąznie w google. Wasze też są fajne ale mi odpowiada to bardziej:
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $("#nav li:has(ul)").click(function (event) {
  4. if (this == event.target) {
  5. $(this).toggleClass('clicked').children('ul').slideToggle();
  6. $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
  7. $(this).siblings().removeClass('clicked').find("ul").slideUp();
  8. }
  9. }).addClass('has_ul');
  10. });
  11. </script>
[JAVASCRIPT] pobierz, plaintext

Kod
<style type="text/css">
#nav {font: bold 12px/25px arial, sans-serif;}
#nav ul {display:none;}
</style>
slash83
Witam serdecznie!

Zastosowałem rozwiązanie zaprezentowane przez uzytkownika 'nospor', działa to pięknie, ładnie, kod prosty i zrozumiały. Nioestety potrzebuję zrobić troszkę inny efekt.
Otóż przy rozwinięciu jednej listy potrzebowałbym aby zwijały się poprzednik, ale dodatkowo pozostałe nagłówki list. To nie było trudne bo zamiast:

Kod
$("#menu > li").click(function() {
            $(this).siblings().find('ul').hide();
            $(this).find("ul").slideToggle("slow");
        });


wystarczy dać:

Kod
$("#menu > li").click(function() {
            $(this).siblings().hide();
            $(this).find("ul").slideToggle("slow");
        });


Ale teraz przy zwijaniu tej konkretnej listy chciałbym aby pojawiły sie nagłówki również wszystkich pozostałych.

Kombinuję, kombinuję i już pomysłu nie mam na to.

Pozdrawiam
Darek W.
nospor
Czytam raz, czytam drugi raz i nic... nie kumam w ogole co chcesz zrobic. Jakie naglowki? W kodzie co masz u mnie jedne sie chowają inne sie pojawiają. O to chodzi.
A to co ty chcesz zrobic to nie rozumiem jak to ma dzialać
slash83
Witam!

Faktycznie - strasznie tez opis zagmatwałem, może poniżej napiszę jak teraz działa skrypt i jakbym potrzebował by dział (na przykładzie wcześniej przytoczonej listy - czyli:

  1. <ul id="menu">
  2. <li><a href="#">Co nowego?</a>
  3. <ul class="active">
  4. <li><a href="#">Specjalności tygodnia</a></li>
  5. <li><a href="#">Zdjęcia z ostatniej nocy!</a></li>
  6. <li><a href="#">Komentarze użytkowników</a></li>
  7. </ul>
  8. </li>
  9. <li><a href="#">Tylko dla członków</a>
  10. <ul>
  11. <li><a href="#">Największe gwiazdy</a></li>
  12. <li><a href="#">Monitoring 24/7</a></li>
  13. </ul>
  14. </li>
  15. </li>
  16. <li><a href="#">O nas</a>
  17. <ul>
  18. <li><a href="#">Ochrona prywatności</a></li>
  19. <li><a href="#">Regulamin strony</a></li>
  20. <li><a href="#">Kontakt</a></li>
  21. </ul>
  22. </li>
  23. </ul>



Pierwotnie wszystkie listy są schowane - widzimy więc:

- Co nowego
- Tylko dla członków
- O nas

po kliknięciu na "Tylko dla członków" lista wygląda tak:

- Co nowego
- Tylko dla członków
---Największe gwiazdy
---Monitoring 24/7
- O nas

a ja chciałem by wyglądała tak:
-Tylko dla członków
---Największe gwiazdy
---Monitoring 24/7

"Co nowego" oraz "O nas" miały sie schować. Taki efekt uzyskuje się po usunięciu z $(this).siblings().find('ul').hide(); funkcji find('ul').

I teraz to czego nie umiem juz zrobić - jak sprawić by po kliknięciu na "Tylko dla członków" lista sie schowała ale jednocześnie pojawiły się napisy "Co nowego" oraz "O nas" - innymi słowy wrócić do punktu pierwotnego.

Pozdrawiam
Darek W.
nospor
Teraz wszystko jasne smile.gif

http://jsfiddle.net/m46bb/2/
slash83
Podziekował, o to mi chodziło!
Malukaz
$( '#menu > li > ul' )
.hide()
.click(function( e ){
e.stopPropagation();
});
$('#menu > li').click(function(){
$('#menu > li > ul').each(function(){
$(this).slideToggle("slow");
});
});
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.