rozwijany panel logowania - przełącznik

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

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ć