웹 개발 공부중

jQuery 이용해서 div박스 열고 닫기

redeyes 2021. 12. 14. 11:30
  • 실제로 jquery 코드는 script에 $('#box').show(); $('#box').hide(); 딱 두줄,  실제로 편해요, 
<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <style>
        div{
            margin: 100px auto;
            text-align: center;
        }
        button {
            width: 100px;
        }

        #box {
            background-color: aquamarine;
            width: 150px;
            height: 150px;
            border-radius: 20px;
            text-align: center;
        }
    </style>

    <script>
        var state = 0;

        function onOff() {
            if (state == 0) {
                $('#box').hide();
                state = 1;
            } else {
                $('#box').show();
                state = 0;
            }
        }
    </script>

    <title>jquery연습하기</title>
</head>

<body>
    <div>
        <button onclick="onOff()" type="button" class="btn btn-dark">버튼</button>
    </div>
    <div id='box'>
        <h2>box</h2>
    </div>
</body>

</html>
  • 부트스트랩을 사용할경우 jquery CDN링크가 같이 들어오기때문에 따로 뭘 할 필요는 없습니다.

https://cdnjs.com/

 

cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil

cdnjs.com

혹은 cdnjs 들어가서 jquery 검색후 직접 태그를 적용해도 됩니다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>