Forum PHP.pl > [JavaScript] jQuery Rozbijane menu ( zwijanie całej gałęzi )

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] jQuery Rozbijane menu ( zwijanie całej gałęzi )

arzach

11.01.2010, 16:20:09

Witam robie menu trzy pozimowe

I zrobiłem je i wszystko działa tylko nie wiem jak zrobić gdy kliknę w pierwszy element listy by zwijała
się płynie cała lista.

Kod

[JAVASCRIPT] pobierz, plaintext 
<html>
<head>
  <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){ 
 
$('.cat_toggle').click(function(){
$(this).next('div').slideToggle('slow');
 
$('.cat_toggle2').css({'display' : 'none'});
 
});
 
$('.cat_toggle1').click(function(){
$(this).next('div').slideToggle('slow');
});
 
}); 
 
</script>
 
<style type='text/css'>
 
.cat_toggle, .cat_toggle1, .cat_toggle2, {
cursor: pointer;
}
 
.cat_toggle1, .cat_toggle2 {
display: none;
}
 
.cat_toggle1 {
margin-left: 15px;
}
 
.cat_toggle2 {  
margin-left: 25px;
}
 
</style>
 
</head>
<body>
 
<div class='cat_toggle'>test</div>
 
<div class='cat_toggle1'>test1</div>
 
<div class='cat_toggle2'>test2</div>
 
<div class='cat_toggle'>test</div>
 
<div class='cat_toggle1'>test1</div>
 
<div class='cat_toggle2'>test2</div>
 
<div class='cat_toggle'>test</div>
 
<div class='cat_toggle1'>test1</div>
 
<div class='cat_toggle2'>test2</div>
 
 
</body>
</html>
[JAVASCRIPT] pobierz, plaintext

Działanie można zobaczyc na http://fusion.boo.pl/menu.htm

.

skowron-line

11.01.2010, 17:53:40

Nie znam jQuery bo według mnie Mootools

No ale ogólnie musisz zrobić tak żeby po kliknięciu na daną zakładkę w pętli zwijało wszystko oprócz tego na który kliknąłeś. To jest naprawdę proste do zrobienia.

@DOWN
Albo pogrzebać w dokumentacji

EDIT @DOWN:
Chyba coś źle zrozumiałeś.

Darti

11.01.2010, 17:54:24

[JAVASCRIPT] pobierz, plaintext 
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){ 
 
	$('.button').click(function(){
		$(this).next('div').children().slideToggle('slow');
	});
 
}); 
</script>
 
<style type='text/css'>
.cat_toggle {
cursor: pointer;
padding-left: 15px;
}
.span {
display: block;
}
</style>
</head>
<body>
<div class='button'>Button</div>
<div class='cat_toggle'>
    <div class='cat_toggle1'>
    <span><a href="#" class='span'>Odnosnik 1</a></span>
    <span><a href="#" class='span'>Odnosnik 2</a></span>
    <span><a href="#" class='span'>Odnosnik 3</a></span>
    <span><a href="#" class='span'>Odnosnik 4</a></span>
    </div>
 
    <div class='button'>Button</div>
    <div class='cat_toggle'>    
        <div class='cat_toggle1'>   
        <span><a href="#" class='span'>Odnosnik 1</a></span>     
        <span><a href="#" class='span'>Odnosnik 2</a></span>
        <span><a href="#" class='span'>Odnosnik 3</a></span>
        <span><a href="#" class='span'>Odnosnik 4</a></span>
        </div>
 
        <div class='button'>Button</div>
        <div class='cat_toggle'>
            <div class='cat_toggle1'>           
            <span><a href="#" class='span'>Odnosnik 1</a></span> 
            <span><a href="#" class='span'>Odnosnik 2</a></span>
            <span><a href="#" class='span'>Odnosnik 3</a></span>
            <span><a href="#" class='span'>Odnosnik 4</a></span>
            </div>
        </div>
    </div>    
</div>
</body>
</html>
[JAVASCRIPT] pobierz, plaintext

arzach

12.01.2010, 07:58:19

Działa teraz dobrze ale jest
jeden problem bo od razu po załadowaniu wszystkie kategorie są od razu rozwinięte
Próbowałem z display: none; ale
to nic nie dało

Przykład działania http://www.fusion.boo.pl/menu1.htm

.

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.