Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML][JavaScript] Skrypt JS on click otwierający kilka divów
BienuSS
post
Post #1





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

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

Witam jak zrobić żeby funkcja ta :

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	 <link rel="stylesheet" href="styles.css"/>
  4.  
  5. <script type="text/javascript">
  6. <!--
  7. function pokazAlboUkryj(co) { 
  8.      var obiekt = document.getElementById(co); 
  9.      if (obiekt.style.display == 'block') { 
  10.           obiekt.style.display = 'none'; 
  11.      } else { 
  12.           obiekt.style.display = 'block'; 
  13.      } 
  14. }
  15. -->
  16. </script>
  17.  
  18. </head>
  19. <body>
  20.  
  21. <a href="#add" onclick="pokazAlboUkryj('add'); return false;">
  22.  
  23. <div id="more"><b>+2</b></div></a></a>
  24.  
  25. <div id="add">
  26. </div>
  27.  
  28. <div id="add2">
  29. </div>
  30.  
  31. </body>
  32. </html>
[HTML] pobierz, plaintext


Po kliknieciu wyswietlała div "add" i "add2" powiem odrazu żeby wrzucić te dwa divy do jednego odpada. Po prostu nie sprawdzi sie to na stronie
Z góry dzięki
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
viking
post
Post #2





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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

https://jsfiddle.net/Lpfr9x2e/
Go to the top of the page
+Quote Post
BienuSS
post
Post #3





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

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

Dzięki wielkie, dokładnie o to mi chodziło. A jeszcze tylko pytanie czy wiesz jak zrobić żeby div który znajduje sie pod tym z którego wysuwa sie dodatkowe opcje, przesunął sie w dół w raz z pojawieniem sie tych "wysuwanych divów" ?
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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

Dopisz CSS do tego.
Go to the top of the page
+Quote Post
BienuSS
post
Post #5





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

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

https://jsfiddle.net/Lpfr9x2e/8/

Zamykając tego pierwszego diva "match-box" pod-divy wyswietlaja sie za głównymi divami a jak nie zamkne tego diva to wyswietlaja sie tak jak chce. Aczkolwiek gdy wrzuce juz to na moja strone to gdy nie zamkne tego diva to jest przerwa po miedzy nimi ok 50px.

Dobra działa musiałem zamknąć diva odrazu po hiperłączu "+2" a nie po wszystkich już rozwinięciach

Ten post edytował BienuSS 3.11.2017, 19:55:04
Go to the top of the page
+Quote Post
viking
post
Post #6





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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

Uruchamiasz narzędzia deweloperskie na swojej stronie i patrzysz co to powoduje.
Go to the top of the page
+Quote Post
BienuSS
post
Post #7





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

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

Zrobiłem to z twojego przykładu tylko jak zrobić żeby po kliknieciu na 1 rozwijały sie tylko podpunkty z z 1 a nie wszystkie ?
1.
a
b
c
2.
a
b
c
3
a
b
c

EDIT

naprawiłem to zmieniałąc wartość document.getElementById przy kazdym divie

EDIT

A jak w CSS zrobić żeby do każdego diva który zaczyna sie np. od słowa "bleble" przypisać jakąś wartosć?


Ten post edytował BienuSS 4.11.2017, 00:55:10
Go to the top of the page
+Quote Post
viking
post
Post #8





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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

Ja bym ci radził na początek zrobić porządek w samym htmlu. Masz zdecydowanie za dużo id.
Go to the top of the page
+Quote Post
BienuSS
post
Post #9





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

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

Divy najłatwiej jest pozycjonować, to pozamieniać id na klasy czy o co dokładnie Ci chodzi?

Zamiast tego :

[HTML] pobierz, plaintext 
  1. 	<div id="team1">
  2. 						<div id="img-team1"><img src="img/vp.jpg"/></div>
  3. 							<div id="team-1">Virtus Pro</div>
  4. 								<a href=""><div id="kurs-team1">1.69</div></a>
  5. 					</div>
  6.  
[HTML] pobierz, plaintext


Dać to:
[HTML] pobierz, plaintext 
  1. 	<div id="team1">
  2. 						<img src="img/vp.jpg"/>
  3. 							<p>Virtus Pro</p>
  4. 								<a href="">1.69</a>
  5. 					</div>
  6.  
[HTML] pobierz, plaintext


i w css wpisać tak: 

[HTML] pobierz, plaintext 
  1. #team1 
  2. #team1 img
  3. #team1 p
  4. #team 1 a 
[HTML] pobierz, plaintext


?

Ten post edytował BienuSS 4.11.2017, 12:00:50
Go to the top of the page
+Quote Post
viking
post
Post #10





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

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

To z czasem przychodzi. Na razie jest za dużo divów (w sumie tylko one i linki), id nakładane na takie elementy jak more itp. Poczytaj sobie selektory https://www.w3.org/TR/css3-selectors/ a tam gdzie nie trzeba nie dodawaj.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 23.08.2025 - 10:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn