Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Show / hide
Forum PHP.pl > Forum > Przedszkole
Adis92
7.12.2012, 22:31:31
Witam.
Próbuję zrobić chowanie i pokazywanie boxa wzajemnie na siebie oddziaływające . Skrypt, który znalazłem w internecie w pewnym stopniu udało mi się przekstałcić na moje potrzeby lecz problem jest taki że działa tylko pierwszy box, a reszta nie odpowiada.
Skrypt wziąłem z tej strony: http://www.webdesignerwall.com/demo/jquery/accordion1.html.
Chcę aby po naciśnięciu na div news_hidden on się chował, a pokazywał się div news_active znajdujący się pod nim i chował się poprzednio otwarty div news_active i pokazywał wcześniej ukryty div news_hidden.
Mój plik wygląda następująco:
Kod
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    $("#news #news_active:first").addClass("active");
    $("#news #news_hidden:first").hide();
    $("#news #news_hidden:not(:first)").hide();

    $("#news #news_hidden").click(function(){
        $(this).next("#news_active").slideToggle("slow")
        .siblings("#news_active:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).hide();
        $(this).siblings("#news_hidden").removeClass("active");
    });

});
</script>

[HTML] pobierz, plaintext 
  1. <div id="news">
  2.             <!-- Skrypt działa tylko na te 2 boxy -->
  3.             <div id="news_hidden">
  4.                      <!-- ukryty box -->
  5.             </div>
  6.             <div id="news_active">
  7.                      <!-- aktywny box -->
  8.             </div>
  9.            <!-- Tutaj przestaje działać na resztę boxów -->
  10.             <div id="news_hidden">
  11.                      <!-- aktywny box -->
  12.             </div>
  13.             <div id="news_active">
  14.                      <!-- ukryty box -->
  15.             </div>
  16.             <div id="news_hidden">
  17.                      <!-- aktywny box -->
  18.             </div>
  19.             <div id="news_active">
  20.                      <!-- ukryty box -->
  21.             </div>
  22. </div>
[HTML] pobierz, plaintext
b4rt3kk
8.12.2012, 02:34:52
Musisz mieć jakiś punkt zaczepienia, tzn. wykorzystać DOM. O ile dobrze zrozumiałem Twój problem. Kod HTML:

[HTML] pobierz, plaintext 
  1. <div id="news">
  2.             <!-- Skrypt działa tylko na te 2 boxy -->
  3. <div class="parentNod">
  4.             <div id="news_hidden">
  5.                      <!-- ukryty box -->
  6.             </div>
  7.             <div id="news_active">
  8.                      <!-- aktywny box -->
  9.             </div>
  10. </div>
  11.            <!-- Tutaj przestaje działać na resztę boxów -->
  12. <div class="parentNod">
  13.             <div id="news_hidden">
  14.                      <!-- aktywny box -->
  15.             </div>
  16.             <div id="news_active">
  17.                      <!-- ukryty box -->
  18.             </div>
  19. </div>
  20. <div class="parentNod">
  21.             <div id="news_hidden">
  22.                      <!-- aktywny box -->
  23.             </div>
  24.             <div id="news_active">
  25.                      <!-- ukryty box -->
  26.             </div>
  27. </div>
  28. </div>
[HTML] pobierz, plaintext


a teraz jQuery:

[HTML] pobierz, plaintext 
  1. $(function() {
  2.  
  3.   $('.parentNod div').click(function() {
  4.     $(this).closest('.parentNod').children('div').each(function() {
  5.       if ($(this).is(":visible") == true) $(this).hide(); else $(this).show();
  6.     });
  7.   });
  8.  
  9. });
[HTML] pobierz, plaintext

Adis92
8.12.2012, 09:46:32
Rozumiem o co chodzi z tym zaczepieniem. Tylko przyznam że na js się nie znam i nie bardzo wiem gdzie wstawić tą funkcję.
b4rt3kk
8.12.2012, 12:38:07
Cytat(Adis92 @ 8.12.2012, 09:46:32 ) *
Rozumiem o co chodzi z tym zaczepieniem. Tylko przyznam że na js się nie znam i nie bardzo wiem gdzie wstawić tą funkcję.


Pomiędzy znaczniki <script>...</script> i to wszystko, powinno działać.
Pawel_W
8.12.2012, 13:30:38
ludzie, id jest po to, żeby używać go tylko raz...
Adis92
9.12.2012, 14:44:14
Użyłem Twojego skryptu i działa tylko chciałbym żeby po tym jak się otwiera nowy div .news_active i jest otwarty inny div .news_active to żeby ten otwarty się zamykał i pokazywał jego div .news_hidden.
Kod
            <script>
                $(function() {
                    $(".news_active:first").show();
                    $(".news_hidden:first").hide();
    
                      $('.parentNod .news_hidden').click(function() {
                        $(this).closest('.parentNod').children('div').each(function() {
                              if ($(this).is(":visible") == true)
                                $(this).slideUp("slow");
                            else
                                $(this).slideToggle("slow");
                        });
                      });
                
                });
            </script>
b4rt3kk
9.12.2012, 23:33:02
Cytat(Pawel_W @ 8.12.2012, 13:30:38 ) *
ludzie, id jest po to, żeby używać go tylko raz...


Słuszna uwaga, musisz zmienić id na class. Później zastosować ukrywanie / pokazywanie obiektu dla wszystkich obiektów danej klasy.
Adis92
10.12.2012, 00:33:27
Cytat(b4rt3kk @ 10.12.2012, 00:33:02 ) *
Słuszna uwaga, musisz zmienić id na class. Później zastosować ukrywanie / pokazywanie obiektu dla wszystkich obiektów danej klasy.


Zmieniłem na class już. Ale jak zastosować ukrywanie / pokazywanie obiektu dla wszystkich obiektów danej klasy? Bo nie bardzo wiem jak to zrobić.
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.