Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][jQuery] Rozwijanie i zwijanie elementów
Puzi
post 7.02.2010, 11:03:58
Post #1





Grupa: Zarejestrowani
Postów: 231
Pomógł: 17
Dołączył: 26.08.2007

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
skowron-line
post 7.02.2010, 11:16:57
Post #2





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

Sprawdź sobie coś takiego http://www.i-marco.nl/weblog/jquery-accordion-menu/
albo w guuglu wpisz "jquery accordion"


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 13.06.2025 - 02:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn