Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Archiwum dropdown onclick
Forum PHP.pl > Forum > Po stronie przeglądarki
Wielopol
Witam,
od razu mówię, że praktycznie nie mam pojęcia o javascripcie smile.gif Chcę zrobić sobie "proste" rozwijane archiwum i próbowałem w css, ale mi się nie udawało, więc planuję spróbować w js, ale o tym już wgl nie mam pojęcia, więc zwracam się z prośbą o pomoc do Was.
Chciałbym, żeby to wyglądało tak, że jest napis "Archiwum" i jak to kliknę, to się pokazuje jakiś tam div, który był dotychczas niewidzialny i zawiera listę miesięcy z archiwum, a jak kliknę drugi raz, to z powrotem znika. Jeżeli potraficie to zrobić w css, to super, jeżeli nie, to też super, jeżeli potraficie w javascripcie biggrin.gif

Czekam na pomoc i z góry dziękuję biggrin.gif
trueblue
https://jsfiddle.net/Lg60b0oh/
Wielopol
Super, dzięki biggrin.gif wiedziałem, że to musi być proste smile.gif
A umiałbyś mi pomóc jeszcze z taką kwestią, że mam tę metkę "? Archiwum ?" i chciałbym, żeby przy rozwiniętym archiwum strzałki były w górę. Próbowałem napisać funkcję do tego, ale trochę mi nie wychodzi, teraz wygląda tak:

  1. function archiwum()
  2. {
  3. var znak=document.getElementById("metka").value;
  4.  
  5. if (znak=='? Archiwum ?') document.getElementById("metka").innerHTML="? Archiwum ?";
  6.  
  7. if (znak=='? Archiwum ?') document.getElementById("metka").innerHTML="? Archiwum ?";
  8.  
  9. }


tu jeszcze html

  1. <div id="arch" >
  2. <input type="checkbox" id="archcheck"/>
  3. <h2><label for="archcheck" id="metka" onclick="archiwum()">? Archiwum ?</label></h2>
  4. <div id="archive"><?php wp_get_archives( $args ); ?></div>
  5. </div>
Wielopol
przykro mi to mówić, ale nie działa... Na jsfiddle działa, ale na stronie nie :c
trueblue
Na pewno wprowadziłeś zmiany w css? Czyściłeś cache przeglądarki?
Wielopol
oto css

  1. #arch label:after{
  2. content:'\2193';
  3. }
  4.  
  5. #arch label:before{
  6. content:'\2193';
  7. }
  8.  
  9. #arch input:checked+label:after{
  10. content:'\2191';
  11. }
  12.  
  13. #arch input:checked+label:before{
  14. content:'\2191';
  15. }


i strzałki w dół przy zwiniętym działają, ale po rozwinięciu archiwum się rozwija, ale strzałki się nie zmieniają
trueblue
input:checked label:after
to nie jest to samo co:
input:checked+label:after
Wielopol
już zmieniłem, jest tak jak mi napisałeś na początku, po prostu przez przypadek wysłałem Ci ze spacjami pomiędzy, bo próbowałem różnych możliwości, ale pierwotnie było z plusem i też nie działało
trueblue
Na jsFiddle działa, https://jsfiddle.net/Lg60b0oh/2/
Może czcionka, które używasz nie ma którychś strzałek. Więcej nie wywróżę.
Wielopol
mam, bo próbowałem ustawić same w górę i same w dół i wszystko działa, próbowałem też ustawić zwykłe słowa zamiast strzałek i też nie działa, po prostu css nie rozumie tego. Na jsfiddle działa, a na stronie nie i to mnie najbardziej dziwi.
trueblue
  1. #arch input:checked+h2 label:after{
  2. content:'\2191';
  3. }
  4.  
  5. #arch input:checked+h2 label:before{
  6. content:'\2191';
  7. }


Ale <h2> nie jest do niczego potrzebny, czcionkę można powiększyć tak:
  1. #arch label{
  2. font-size:18px;
  3. }
Wielopol
kurde, działa, super, dzięki biggrin.gif a wiesz może, dlaczego h2 wszystko psuje? biggrin.gif
trueblue
div + p Selects all <p> elements that are placed immediately after <div> elements
http://www.w3schools.com/cssref/sel_element_pluss.asp

div p Selects all <p> elements inside <div> elements
http://www.w3schools.com/cssref/sel_element_element.asp
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.