Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][jQuery] Rozwijanie i zwijanie elementów
Forum PHP.pl > Forum > Przedszkole
Puzi
7.02.2010, 11:03:58
Witam,

Oto mój HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.    <head>
  4.       <title></title>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.       <link rel="stylesheet" href="./styles/style.css" type="text/css">
  7.       <script type="text/javascript" src="./tools/jscripts/jquery-1.4.1.min.js"></script>
  8.       <script type="text/javascript">
  9.          $(document).ready(
  10.             function()
  11.             {
  12.                $("#page_9w").click(
  13.                function()
  14.                {
  15.                   $("#page_9").toggle();
  16.                }).toggle(function() { $("#img_9").attr('src','./images/minus.jpg'); }, function() { $("#img_9").attr('src','./images/plus.jpg'); });
  17.  
  18.                $("#page_15w").click(
  19.                function()
  20.                {
  21.                   $("#page_15").toggle();
  22.                }).toggle(function() { $("#img_15").attr('src','./images/minus.jpg'); }, function() { $("#img_15").attr('src','./images/plus.jpg'); });
  23.  
  24.                $("#page_18w").click(
  25.                function()
  26.                {
  27.                   $("#page_18").toggle();
  28.                }).toggle(function() { $("#img_18").attr('src','./images/minus.jpg'); }, function() { $("#img_18").attr('src','./images/plus.jpg'); });
  29.             }
  30.          );
  31.  
  32.     </script>
  33.   </head>
  34.   <body>
  35.       <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  36.          <tr>
  37.             <td class="table_text_left">&nbsp;<a href="#" id="page_9w"><img src="./images/plus.jpg" id="img_9" alt=""></a>&nbsp;aaaaa</td>
  38.          </tr>
  39.       </table>
  40.       <div id="page_9" style="display: none;">
  41.          <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  42.             <tr>
  43.                <td class="table_text_left" style="padding-left: 15px;">&nbsp;<a href="#" id="page_15w"><img src="./images/plus.jpg" id="img_15" alt=""></a>&nbsp;bbbbb</td>
  44.             </tr>
  45.          </table>
  46.          <div id="page_15" style="display: none;">
  47.             <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  48.                <tr>
  49.                   <td class="table_text_left" style="padding-left: 30px;">&nbsp;<a href="#" id="page_18w"><img src="./images/plus.jpg" id="img_18" alt=""></a>&nbsp;ccccc</td>
  50.                </tr>
  51.             </table>
  52.             <div id="page_18" style="display: none;">
  53.                <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  54.                   <tr>
  55.                      <td class="table_text_left" style="padding-left: 45px;">&nbsp;<img src="./images/empty.jpg" id="img_19" alt="">&nbsp;ddddd</td>
  56.                   </tr>
  57.                </table>
  58.             </div>
  59.          </div>
  60.          <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  61.             <tr>
  62.                <td class="table_text_left" style="padding-left: 15px;">&nbsp;<img src="./images/empty.jpg" alt="">&nbsp;eeeee</td>
  63.             </tr>
  64.          </table>
  65.       </div>
  66.       <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  67.          <tr>
  68.             <td class="table_text_left">&nbsp;<img src="./images/empty.jpg" alt="">&nbsp;fffff</td>
  69.          </tr>
  70.       </table>
  71.       <table class="width_table" border="0" cellpadding="0" cellspacing="0">
  72.          <tr>
  73.             <td class="table_text_left">&nbsp;<img src="./images/empty.jpg" alt="">&nbsp;ggggg</td>
  74.          </tr>
  75.       </table>
  76.   </body>
  77. </html>
[HTML] pobierz, plaintext


I mam pytanie odnośnie tego fragmentu kodu:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.          $(document).ready(
  3.             function()
  4.             {
  5.                $("#page_9w").click(
  6.                function()
  7.                {
  8.                   $("#page_9").toggle();
  9.                }).toggle(function() { $("#img_9").attr('src','./images/minus.jpg'); }, function() { $("#img_9").attr('src','./images/plus.jpg'); });
  10.  
  11.                $("#page_15w").click(
  12.                function()
  13.                {
  14.                   $("#page_15").toggle();
  15.                }).toggle(function() { $("#img_15").attr('src','./images/minus.jpg'); }, function() { $("#img_15").attr('src','./images/plus.jpg'); });
  16.  
  17.                $("#page_18w").click(
  18.                function()
  19.                {
  20.                   $("#page_18").toggle();
  21.                }).toggle(function() { $("#img_18").attr('src','./images/minus.jpg'); }, function() { $("#img_18").attr('src','./images/plus.jpg'); });
  22.             }
  23.          );
  24.  
  25.     </script>
[HTML] pobierz, plaintext


Czy da się zrobić za pomocą jednej funkcji aby rozwijała i ukrywała dany element po ID??
Bo teraz muszę definiować każde kliknięcie dla danego elementu a to jest trochę męczące jak jest tego dużo.

Pozdrawiam i proszę o pomoc.
skowron-line
7.02.2010, 11:16:57
Sprawdź sobie coś takiego http://www.i-marco.nl/weblog/jquery-accordion-menu/
albo w guuglu wpisz "jquery accordion"
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.