6 글 보임 - 1 에서 6 까지 (총 6 중에서)
-
글쓴이글
-
2022년 8월 29일 16:22 #44513
홍세호참가자<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="main.css" rel="stylesheet"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>Hello, world!</title> </head> <body> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand">Navbar</span> <button class="navbar-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <ul class="list-group" id="test1"> <li class="list-group-item">An item <li class="list-group-item">A second item <li class="list-group-item">A third item <li class="list-group-item">A fourth item <li class="list-group-item">And a fifth one <p class="hello">안녕</p> <p class="hello">안녕</p> <p class="hello">안녕</p> <button id="test-btn">버튼</button> <button id="modal-btn">모달버튼</button>
<div class="black-bg"> <div class="white-bg"> <h4>로그인하세요</h4> <button class="btn btn-danger" id="close">닫기</button> </div> </div>
<script> //document.querySelector('.hello').innerHTML="바보"; $('.hello').html('바보').css('color','red');//document.querySelector('#test-buton').addEventListener(); $('#test-btn').on('click',function(){ $('.hello').slideUp(); }) //document.querySelector=$ ,addEventListener=on document.querySelector('.navbar-toggler').addEventListener('click',function(){ document.querySelectorAll('.list-group')[0].classList.toggle('show'); }) $('#modal-btn').on('click',function(){ $('.black-bg').addClass('show'); });$('#btn btn-danger').on('click',function(){ $('black-bg show-modal').removeClass('show'); })</script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html> 질문///////////////// <button id="modal-btn">모달버튼</button> 을 누를시 document.querySelector('.navbar-toggler').addEventListener('click',function(){ document.querySelectorAll('.list-group')[0].classList.toggle('show'); })에서 사용했던 show를 재활용해서(show를누를시 list group이 작동됨)$('#modal-btn').on('click',function(){ $('.black-bg').addClass('show'); }); 이렇게 코드를 구성한 후, 버튼을 누르면 나오게 하려는데 왜 안되는지 모르겠습니다.2022년 8월 29일 19:32 #44535
codingapple키 마스터개발자도구에서 에러같은거 확인가능합니다 개발자도구 elements 탭에서 show가 잘 붙어있으면 css가 이상한 것이라 css도 확인해봅시다
2022년 8월 29일 22:31 #44551
윤혜빈참가자<link href="main.css" rel="stylesheet">를 <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 보다 아래에 넣어보세요!
-
글쓴이글
6 글 보임 - 1 에서 6 까지 (총 6 중에서)
- 답변은 로그인 후 가능합니다.