Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jquery]Rozwijane menu
sirostr
post 26.07.2008, 14:37:43
Post #1





Grupa: Zarejestrowani
Postów: 40
Pomógł: 1
Dołączył: 29.01.2008
Skąd: Wielkopolska

Ostrzeżenie: (0%)
-----

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.

Ten post edytował sirostr 26.07.2008, 14:46:28
Go to the top of the page
+Quote Post
snapshot
post 1.08.2008, 01:38:30
Post #2





Grupa: Zarejestrowani
Postów: 96
Pomógł: 6
Dołączył: 22.08.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

  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


--------------------
ZF developer
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 20.07.2025 - 01:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn