Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery]Rozwijane menu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
sirostr
26.07.2008, 14:37:43
Mam takie rozwijane menu:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2.     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.     <title>menu jquery</title>
  8.     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  9.     <script type="text/javascript">
  10.     $(document).ready(
  11.     function()
  12.     {    
  13.         $("#show1").click(
  14.         function(){
  15.             $("#menu1").toggle("normal");
  16.         }
  17.         ).toggle(function(){$(this).css('padding-bottom','3px');},function(){$(this).css('padding-bottom','0px');});
  18.  
  19.         $("#show2").click(
  20.         function(){
  21.             $("#menu2").toggle("normal");
  22.         }
  23.         ).toggle(function(){$(this).css('padding-bottom','3px');},function(){$(this).css('padding-bottom','0px');});
  24.  
  25.         $("#show3").click(
  26.         function(){
  27.             $("#menu3").toggle("normal");
  28.         }
  29.         ).toggle(function(){$(this).css('padding-bottom','3px');},function(){$(this).css('padding-bottom','0px');});
  30.  
  31.         $("#show-all").click(
  32.         function(){
  33.             $(".nav ul").toggle("normal");
  34.         }
  35.         ).toggle(function(){$(this).attr('value','Zwiń wszystko');},function(){$(this).attr('value','Rozwiń wszystko');});
  36.  
  37.     });
  38.     </script>
  39. </head>
  40. <body>
  41. <div id="side">
  42. <h2>Menu <input type="submit" id="show-all" value="Rozwiń wszystko" style="position:relative; top: -4px;" /></h2>
  43. <div class="nav">
  44. <h3><a href="#" id="show1">Tytuł</a></h3>
  45. <ul style="display:none" id="menu1">
  46.     <li><a href="#">Link #1</a></li>
  47.     <li><a href="#">Link #2</a></li>
  48.     <li><a href="#">Link #3</a></li>
  49.     <li><a href="#">Link #4</a></li>
  50.     <li><a href="#">Link #5</a></li>
  51. </ul>
  52. </div>
  53.  
  54. <div class="nav">
  55. <h3><a href="#" id="show2">Tytuł</a></h3>
  56. <ul style="display:none" id="menu2">
  57.     <li><a href="#">Link #1</a></li>
  58.     <li><a href="#">Link #2</a></li>
  59.     <li><a href="#">Link #3</a></li>
  60.     <li><a href="#">Link #4</a></li>
  61.     <li><a href="#">Link #5</a></li>
  62. </ul>
  63. </div>
  64.  
  65. <div class="nav">
  66. <h3><a href="#" id="show3">Tytuł</a></h3>
  67. <ul style="display:none" id="menu3">
  68.     <li><a href="#">Link #1</a></li>
  69.     <li><a href="#">Link #2</a></li>
  70.     <li><a href="#">Link #3</a></li>
  71.     <li><a href="#">Link #4</a></li>
  72.     <li><a href="#">Link #5</a></li>
  73. </ul>
  74. </div>
  75. </body>
  76. </html>
[HTML] pobierz, plaintext

Problem w tym, że kiedy kliknę na 'Rozwiń wszystko', a a któreś menu jest już otwarte, to ono się zamyka, i na odwrót.
Oczywiscie mógłbym w CSS napisać że to ma display:none, a potem tylko css('display','block') ale to nie ma takiego efektu.
snapshot
1.08.2008, 01:38:30
  1. Popraw styl pisania w jQuery...
  2. Nie wal do jQuery css. Jak już to addClass i w css definuj.
  3. Używaj val()
  4. The write less, do more winksmiley.jpg
A tu masz poprawiony kod. Jak coś nie jasne to pytaj.
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function(){ 
  3.  
  4. $("h3 a").click(function(){
  5.   $(this).parent().next().toggle("normal");
  6. });
  7.  
  8. $("#show-all").toggle(function(){
  9.       $(this).val('Zwiń wszystko');
  10.       $(".nav ul").show("normal");
  11.     }, function(){
  12.       $(this).val('Rozwiń wszystko');
  13.       $(".nav ul").hide("normal");
  14.     });
  15. });
  16. </script>
[HTML] pobierz, plaintext
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.