• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

rozwijany panel logowania - przełącznik

Object Storage Arubacloud
0 głosów
897 wizyt
pytanie zadane 27 lutego 2018 w JavaScript przez Konfeusz Bywalec (2,810 p.)

Witam.

Mam następujący problem. Robię rozwijany panel logowania obsługiwany przez funkcje w JavaScript. Wszystko jest tak jak chcę, z małym wyjątkiem. 

Aby rozwinąć panel, należy kliknąć "rozwiń", panel się rozwija i zmienia etykietę z "rozwiń" na "zwiń", natomiast kiedy chcę zwinąć i kliknę na "zwiń" panel się zwinie ale już nie daje sobie rady ze zmianą etykiety na "rozwiń".

Nie jestem nawet zaawansowany i podejrzewam że to mała pierdułka, wiem, że trzeba by wykorzystać metode toggle, ale... proszę o pomoc.

Próbowałem z content w CSS ale coś mi również nie działa.

Z góry dziękuje.

Kod:

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>burger</title>
    <style>
        .przelacz {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 30px;
            top: 120px;
            background-color: black;
            color: white;
            border-radius: 50%;
            font-size: 10px;
            line-height: 30px;
            text-align: center;
            transition: .5s;
            cursor: pointer;
        }

        .nav {
            height: 150px;
            position: absolute;
            top: -120px;
            right: -10px;
            border-radius: 10px;
            background-color: black;
            width: 300px;
            /*100vw;*/
            transition: 1s;
        }

        .form {
            color: beige;
        }

        .active {
            top: -10px;
        }
        .bactive {
            display: none;
        }

        .rotate {
            /* transform: rotate(45deg);*/
        }
    </style>
</head>

<body>

    <div class="nav">
        <form class="form"><br> login: <input type="text"><br> password: <input type="password"><br>
        </form>

        <div class="przelacz"></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt tempora, veniam. Laborum consectetur aperiam dolor doloremque cumque debitis, incidunt laudantium provident consequatur perspiciatis accusantium error ratione. Enim laudantium, soluta natus magnam aliquam, et repellat aspernatur molestiae consectetur magni. Corporis quos cum impedit id, magni, iure velit! Magni aut distinctio laborum quis, vitae molestias quisquam cum et dolor tempora numquam amet sint nulla beatae nam libero. Dolore magnam sapiente corporis amet omnis ex distinctio voluptates. Nesciunt et a eos cum esse vitae soluta modi velit vel maxime est sint aliquid itaque reprehenderit numquam asperiores exercitationem veritatis tenetur ipsam, expedita omnis possimus.</p>
    <script>
        const ham = document.querySelector(".przelacz");
        ham.addEventListener("click", change);
        ham.innerHTML="rozwiń";

        function change() {
            ham.classList.toggle("rotate");
            document.querySelector(".nav").classList.toggle("active");
            ham.innerHTML="zwiń"
        }
        
    </script>
</body>

</html>

 

komentarz 28 lutego 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Masz global == >

 const ham = document.querySelector(".przelacz");

        ham.addEventListener("click", change);

        ham.innerHTML="rozwiń";

I nie zmieniasz jego właściwości dlatego zawsze będzie zwiń :).

2 odpowiedzi

0 głosów
odpowiedź 28 lutego 2018 przez Smeki Użytkownik (940 p.)
let licznik = 0;

    function change() {
      licznik++;
      ham.classList.toggle("rotate");
      document.querySelector(".nav").classList.toggle("active");
      ham.innerHTML = licznik % 2 ? "zwiń" : "rozwiń";
    }

Musisz mieć informacje czy teraz powinien być napis zwiń czy rozwiń, proponuję użyć licznika który będzie się zwiększał co kliknięcie i wtedy w funkcji zmieniającej stan możesz sprawdzić czy licznik jest liczbą parzystą czy nie i odpowiednio zareagować

0 głosów
odpowiedź 28 lutego 2018 przez pablop76 VIP (123,180 p.)
innerHTML zamieniłbym na textContent, 'rozwiń ' umieściłbym w html i potem w zależności od tego czy klasa active jest dodana zmieniał tekst.

Podobne pytania

0 głosów
1 odpowiedź 387 wizyt
pytanie zadane 20 maja 2015 w HTML i CSS przez Daniel Siwek Nowicjusz (140 p.)
0 głosów
1 odpowiedź 1,173 wizyt
pytanie zadane 6 października 2018 w HTML i CSS przez Kinga Nowicjusz (210 p.)
0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 20 września 2017 w Java przez fipooo Bywalec (2,880 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...