Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Menu otwierane
Forum PHP.pl > Forum > Przedszkole
adi456
5.03.2012, 10:20:53
Witam, może ktoś polecić jakiś skrypt do otwieranego menu, ponieważ wiekszość posiada dużo niedopracowań. Zależy mi żeby menu otwierało się po kliknięciu, żeby po kliknięciu w odosnik menu się chowało.

Zastosowałem skrypt z tej strony lecz posiada niedociągnięcia, po kliknięciu czegoś w menu nie chowa się, gdy mam 2 menu klikne w jedno otworzy się potem klikam w drugie a to pierwsze dalej jest otwarte (ogólnie problem z zamykaniem, trzeba każdorazowo ręcznie zamykać)

większość skryptów które kiedyś testowałem też miały problemy z zamykaniem się sad.gif

proszę o pomoc
strife
5.03.2012, 10:52:54
Zobacz np.

* http://davidwalsh.name/jquery-sliders
* http://jordankasper.com/jquery/faq/

albo po prostu jQuery $.toggle i sam sobie możesz to napisać.
adi456
5.03.2012, 10:59:56
widze że podesłane linki nie spełniają moich oczekiwań, nie nadają się do menu, ponieważ gdy klikne np This is question 1 rozwinie się potem klikam This is question 2 a This is question 1 dalej jest rozsunięty.

sam nie potrafie tego napisać ponieważ znam się tylko na html css php
strife
5.03.2012, 11:10:30
Cytat(adi456 @ 5.03.2012, 10:59:56 ) *
widze że podesłane linki nie spełniają moich oczekiwań, nie nadają się do menu, ponieważ gdy klikne np This is question 1 rozwinie się potem klikam This is question 2 a This is question 1 dalej jest rozsunięty.

sam nie potrafie tego napisać ponieważ znam się tylko na html css php

Skoro naprawdę znasz te technologie to nie powinieneś mieć żadnych problemów, aby znaleźć w internecie informacje na temat tego o czym Ci napisałem, czyli jQuery $.toggle.

Napisz coś, powiedz z czym masz problem - pomożemy. Problem z zamykaniem możesz łatwo obsłużyć sprawdzając, te które są rozwinięte i różne od aktualnie klikniętego / zaznaczonego i je przełączać ponownie (jquery $.toggle).
adi456
5.03.2012, 11:50:22
to może najłatwiej będzie do tego skryptu skrypt dodać coś co będzie zamykało menu gdy kliknie się gdzies indziej niż w danym menu?
strife
5.03.2012, 12:02:01
Znaj moje dobre serce tongue.gif Masz jak to powinno wyglądać mniej więcej. 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5.     $('ul li a.link').click(function() {
  6.         $('ul li .li-body').hide();
  7.         $(this).parent().find('.li-body').toggle();
  8.     });
  9. });
  10. </script>
  11.  
  12. <style>
  13. .li-body {
  14.     display: none;
  15. }
  16. </style>
  17.  
  18. <ul>
  19.     <li><a class="link" href="java script:void(0)">Element #1</a>
  20.         <div class="li-body">zawartosc menu #1</div>
  21.     </li>
  22.     <li><a class="link" href="java script:void(0)">Element #2</a>
  23.         <div class="li-body">zawartosc menu #2</div>
  24.     </li>
  25.     <li><a class="link" href="java script:void(0)">Element #3</a>
  26.         <div class="li-body">zawartosc menu #3</div>
  27.     </li>
  28. </ul>
[HTML] pobierz, plaintext
adi456
5.03.2012, 12:17:22
bardzo ci dziękuje strife, skrypt działa rewelacyjnie (menu zachowuje się jak w zwykłych programach komputerowych), jednak moderatorzy potrafią być spoko!

p.s. jeszcze malutki problem, co zrobić żeby menu chowało się gdy klikne gdzieś poza menu?
strife
5.03.2012, 12:35:35
Cytat(adi456 @ 5.03.2012, 12:17:22 ) *
bardzo ci dziękuje strife, skrypt działa rewelacyjnie (menu zachowuje się jak w zwykłych programach komputerowych), jednak moderatorzy potrafią być spoko!

p.s. jeszcze malutki problem, co zrobić żeby menu chowało się gdy klikne gdzieś poza menu?

No ba, jasne że są spoko :D

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7.     $('ul li a.link').click(function(event) {
  8.         $('ul li .li-body').hide();
  9.         $(this).parent().find('.li-body').toggle();
  10.  
  11.          event.stopPropagation();
  12.  
  13.     });
  14.  
  15.     $('html').click(function() {
  16.         $('ul li .li-body').hide();
  17.     });
  18.  
  19. });
  20. </script>
  21.  
  22. <style>
  23. .li-body {
  24.     display: none;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29.  
  30. <ul>
  31.     <li><a class="link" href="java script:void(0)">Element #1</a>
  32.         <div class="li-body">zawartosc menu #1</div>
  33.     </li>
  34.     <li><a class="link" href="java script:void(0)">Element #2</a>
  35.         <div class="li-body">zawartosc menu #2</div>
  36.     </li>
  37.     <li><a class="link" href="java script:void(0)">Element #3</a>
  38.         <div class="li-body">zawartosc menu #3</div>
  39.     </li>
  40. </ul>
  41.  
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


Obiecaj mi tylko, że poszerzysz swoją wiedzę o ten rozdział na przyszłość ;-)

Pzdr.
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.