Forum PHP.pl

Witam,
mam skrypt dzięki któremu rozwijam i zwijam listę:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
$( '#menu > li > ul' )
	.hide()
	.click(function( e ){
		e.stopPropagation();
	});
  $('#menu > li').toggle(function(){
	  $(this).find('ul').slideDown();
  }, function(){
  	$( this ).find('ul').slideUp();
  });
});
[JAVASCRIPT] pobierz, plaintext 

Kod html

[HTML] pobierz, plaintext 
      <ul id="menu">
        <li><a href="#">Co nowego?</a>
          <ul class="active">
            <li><a href="#">Specjalności tygodnia</a></li>
            <li><a href="#">Zdjęcia z ostatniej nocy!</a></li>
            <li><a href="#">Komentarze użytkowników</a></li>
          </ul>
        </li>
        <li><a href="#">Tylko dla członków</a>
          <ul>
            <li><a href="#">Największe gwiazdy</a></li>
            <li><a href="#">Monitoring 24/7</a></li>
          </ul>
        </li>
        </li>
        <li><a href="#">O nas</a>
          <ul>
            <li><a href="#">Ochrona prywatności</a></li>
            <li><a href="#">Regulamin strony</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </li>
      </ul>
[HTML] pobierz, plaintext 

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ę.

Nie lepiej tak ?

[HTML] pobierz, plaintext 
<script>
        $("#menu > li").click(function() {
            $(this).find("ul").slideToggle("slow");
        });
    </script>
[HTML] pobierz, plaintext 

nie działa.

nie działa po pewnie nie dałeś stylu jeszcze

o to i on:

[HTML] pobierz, plaintext 
<style type="text/css">
            #menu ul { display: none;}
        </style> 
[HTML] pobierz, plaintext 

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.

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/

Ten post edytował kropamk 17.09.2013, 22:53:23

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.

Ja znalazłem takie rozwiąznie w google. Wasze też są fajne ale mi odpowiada to bardziej:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function () {
	$("#nav li:has(ul)").click(function (event) {
		if (this == event.target) {
			$(this).toggleClass('clicked').children('ul').slideToggle();
			$(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
			$(this).siblings().removeClass('clicked').find("ul").slideUp();
		}
	}).addClass('has_ul');
});
</script>
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował cykcykacz 18.09.2013, 12:59:05

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:



wystarczy dać:



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.

Ten post edytował slash83 29.07.2014, 08:44:55

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ć

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:

[HTML] pobierz, plaintext 
 <ul id="menu">
            <li><a href="#">Co nowego?</a>
                <ul class="active">
                    <li><a href="#">Specjalności tygodnia</a></li>
                    <li><a href="#">Zdjęcia z ostatniej nocy!</a></li>
                    <li><a href="#">Komentarze użytkowników</a></li>
                </ul>
            </li>
            <li><a href="#">Tylko dla członków</a>
                <ul>
                    <li><a href="#">Największe gwiazdy</a></li>
                    <li><a href="#">Monitoring 24/7</a></li>
                </ul>
            </li>
        </li>
        <li><a href="#">O nas</a>
            <ul>
                <li><a href="#">Ochrona prywatności</a></li>
                <li><a href="#">Regulamin strony</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </li>
    </ul>
[HTML] pobierz, plaintext 

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.

Podziekował, o to mi chodziło!

$( '#menu > li > ul' )
.hide()
.click(function( e ){
e.stopPropagation();
});
$('#menu > li').click(function(){
$('#menu > li > ul').each(function(){
$(this).slideToggle("slow");
});
});