Jam's story

[JS] 메뉴클릭하면 글이 나오도록 본문

WEB/JavaScript

[JS] 메뉴클릭하면 글이 나오도록

애플쩀 2022. 6. 6. 16:32 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SS16 2022. 6. 3. - 오후 4:54:33</title>
//<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>
 .container{
    width: 500px;
  }
  
  .collapsible{
    background-color: #777;
    color:white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline:none;
    font-size: 15px;
  }
  
   /* ::가상 요소 선택자*/
  .collapsible::after{
    content:'\002B';  /*   +  */
    color:white;
    float: right;
    font-weight: bold;
    margin-left: 5px;
  }
  
  .collapsible:hover ,  .active{
    background-color: #555;
  }
  
  .content{
    padding: 0 18px;
    background-color: #f1f1f1;
    max-height: 0;  /* 오버플로우가 발생.. */
    overflow: hidden; /* 숨기기 */
    
    transition:max-height  0.2s ease-out;
  }
  
  .active::after{
      content:'\2212';   /*  -  */
   }
</style>

</head>
<body>

<h3>ex11.html</h3>

<div class="container">

<button class="collapsible">Section 1</button>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.</div>

<button class="collapsible">Section 2</button>
<div class="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 </div>

<button class="collapsible">Section 3</button> 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.</div>

</div>
<script>
    var btns=document.getElementsByClassName("collapsible");
    for(var i=0; i<btns.length; i++){
        btns[i].addEventListener("click",function(e){
            this.classList.toggle("active");
            var content=this.nextElementSibling;
            
            //max-height가 0이 아니라면  null로 만들어주고,
            if(content.style.maxHeight){
                content.style.maxHeight=30+"px";

            }else{  //   0이라면- -js는 0이 false니까, panel.scrollHeight를 계산해 px를 붙여줌
                //scrollWidth와 scrollHeight는 요소 크기를 콘텐츠가 차지하는 만큼 늘리고자 할 때 사용할 수 있습니다.
                //스크롤바에 의해 감춰진 영역도 포함한다는 점에서 차이가 있습니다.
                content.style.maxHeight=content.scrollHeight+"px";            }
        },true);
    }
</script>
</body>
</html>
SS16 2022. 6. 3. - 오후 4:54:33 //

ex11.html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.

 

여기서 만약 max-height 가 30px 이라면 ?

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] 호이스팅  (0) 2022.06.08
[JS] 로또번호  (0) 2022.06.08
[JS] 객체, 컬렉션 프레임워크  (0) 2022.06.06
[JS] Boolean  (0) 2022.06.06
[JS] Math  (0) 2022.06.06
'WEB/JavaScript' Related Articles more
Comments