toggle

JavaScript

toggle

듀듀닷 2021. 7. 12. 22:29

토글 메뉴 공부

보여지는 결과는 같다.

1번

  <style>
         body{
            text-decoration: none;
        }
        .nav {
            visibility: hidden;
            width: 100%;
            height: 0vh;
            margin-top: 10px;
            background: linear-gradient(180deg, rgb(91, 50, 241) 0%, rgb(236, 149, 48) 100%);
            transition: all 0.3s;
        }

        .h {
            cursor: pointer;
            border-bottom: 1px solid lightcyan;
            padding: 10px 15px;
            border: transparent;
            border-radius: 10px;
            color: #333;
        }
    </style>
</head>

<body>
    <div class="h" onclick="openNav()">x</div>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        function openNav() {
            if (document.querySelector('.nav').style.visibility === "hidden") { console.log("dd");
                document.querySelector('.nav').style.visibility = 'visible';
                document.querySelector('.nav').style.height = '80vh';
                document.querySelector('.h').textContent = 'O';
            } else {            console.log("ss");
                document.querySelector('.nav').style.visibility = 'hidden';
                document.querySelector('.nav').style.height = '0vh';
                document.querySelector('.h').textContent = 'x';
            }
        }


    </script>
</body>

2번

    <style>
        body{
            text-decoration: none;
        }
        .nav {
            visibility: hidden;
            width: 100%;
            height: 0vh;
            margin-top: 10px;
            background: linear-gradient(180deg, rgb(91, 50, 241) 0%, rgb(236, 149, 48) 100%);
            transition: all 0.3s;
        }

        .h {
            cursor: pointer;
            border-bottom: 1px solid lightcyan;
            padding: 10px 15px;
            border: transparent;
            border-radius: 10px;
            color: #333;
        }
    </style>
</head>

<body>
    <div class="h" onclick="openNav()">O</div>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        function openNav() {
            const nav = document.querySelector('.nav');
            const h = document.querySelector('.h');

            if (nav.style.visibility === "hidden") { console.log("dd");
                nav.style.visibility = 'visible';
                nav.style.height = '80vh';
                h.textContent = 'X';
            } else {            console.log("ss");
                nav.style.visibility = 'hidden';
                nav.style.height = '0vh';
                h.textContent = 'O';
            }
        }
    </script>
</body>

3번

   <style>
        
        .nav {
            visibility: hidden;
            width: 100%;
            height: 0vh;
            margin-top: 10px;
            background: linear-gradient(180deg, rgb(91, 50, 241) 0%, rgb(236, 149, 48) 100%);
            transition: all 0.3s;
        }

        .act {
            visibility: visible;
            height: 60vh;
        }

    
        .h {
            cursor: pointer;
            background-color: skyblue;
            padding: 10px 15px;
            border: transparent;
            border-radius: 10px;
            color: #fff;
        }



        
        
    </style>
</head>

<body>
    <div class="h">x</div>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        const h = document.querySelector('.h');
        const nav = document.querySelector('.nav');

        h.addEventListener('click', () => {
            console.log(h);
            console.log(nav);
            nav.classList.toggle('act');
        })
    </script>

참고

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=curlicu&logNo=40139919116

[ Javascript ] 엘리먼트 보이기 / 숨기기

■ 엘리먼트 보이기 / 숨기기 <title...< p=""> </title...<>

blog.naver.com

https://velog.io/@dev-tinkerbell/display-none%EC%9D%B4-transition%EC%9D%B4-%EC%95%88%EB%A8%B9%ED%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0

display none이 transition이 안먹히는 이유

해결방법 말고 원인 궁금하지 않나요..?🤓

velog.io

https://goddino.tistory.com/129

[js] 자바스크립트 toggle 적용하기(ft. add, remove)

자바스크립트를 이용한 toggle 메서드의 사용을 알아보겠습니다. toggle() 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다. add()와 remove() 메서드를 한번에