slideToggle이 왜 화면 아래쪽으로 튀어 나옵니까?

Question

div 클래스를 토글하는 코드를 작성 중입니다. 페이지 하단까지 div 아래로 슬라이드하고 다시 클릭 할 때 위로 움직이고 싶습니다.

내 HTML 코드가 포함되어

<div class="chat-sidebar"> 

    <div class="chat_head"> 
     <h4 align="center"><b>Online Users</b></h4> 
    </div> 

    <div class="chat_body"> 
     <div class="sidebar-name" ></div> 
    </div> 

</div> 

이 HTML에 대한 CSS :

.chat-sidebar{ 

    width: 200px; 
    position: fixed; 
     height: 370px;; 
    right: 10px; 
     bottom: 0px !important; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border: 1px solid rgba(29, 49, 91, .3); 
     border-radius:5px 5px 0px 0px; 
} 
.sidebar-name{ 
    padding-left: 10px; 
    padding-right: 10px; 
     margin-top : 0.8cm; 
    font-size: 20px; 
} 
.chat_head{ 
     background:#f39c12; 
    color:white; 
     padding:2px; 
     font-weight:bold; 
     cursor:pointer; 
     border-radius:5px 5px 0px 0px; 
     margin-top: -10px; 
} 

지금은 같은 jQuery를 기능을 사용하여 주요 chat-sidebar DIV 슬라이딩 오전 :

$(document).ready(function() { 

    $('.chat_head').click(function(){ 
     $('.chat-sidebar').slideToggle('slow'); 
    }); 


}); 

을

slideToggle은를 클릭하면 올바르게 작동합니다.div. 그러나 너무 멀리 떨어져서 더 이상 보이지 않게됩니다 (화면 밖으로). 내가 여기서 무엇을 놓치고 있니?

Answer 1

전체 래퍼 div가 아닌 .chat_body로 슬라이드를 전환해야합니다. 따라서 .chat-sidebar에서 height을 제거하고 .chat_body으로 옮기세요. 이제 .chat_body에 slideToggle() 기능을 적용

$(document).ready(function() { 
 
    $('.chat_head').click(function() { 
 
    $('.chat_body').slideToggle('slow'); 
 
    }); 
 
});

.chat-sidebar { 
 
    width: 200px; 
 
    position: fixed; 
 
    right: 10px; 
 
    bottom: 0px !important; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border: 1px solid rgba(29, 49, 91, .3); 
 
    border-radius: 5px 5px 0px 0px; 
 
} 
 
.sidebar-name { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    margin-top: 1px; 
 
    font-size: 20px; 
 
} 
 
.chat_head { 
 
    background: #f39c12; 
 
    color: white; 
 
    padding: 2px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    border-radius: 5px 5px 0px 0px; 
 
    margin-top: -10px; 
 
} 
 
.chat_body { 
 
    height: 120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chat-sidebar"> 
 
    <div class="chat_head"> 
 
    <h4 align="center"><b>Online Users</b></h4> 
 
    </div> 
 
    <div class="chat_body"> 
 
    <div class="sidebar-name"></div> 
 
    </div> 
 
</div>

Answer 2

이 시도 :

$(document).ready(function() { 
 
    $(".head").on("click",function(){ 
 
     $(".chat-sidebar").slideToggle("slow"); 
 
    }) 
 
     
 
})

.wrapper { 
 
    border: 1px solid gray; 
 
    width: 200px; 
 
    position: fixed; 
 
    right: 10px; 
 
    bottom: 0; 
 
    min-height: 50px; 
 
    border-radius:3px 3px 0px 0px; 
 
} 
 

 
.head { 
 
    background:#f39c12; 
 
    color:white; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 50px; 
 
    border-radius:5px 5px 0px 0px; 
 
        
 
} 
 
.chat-sidebar { 
 
    background-color: #fff; 
 
    height: 200px; 
 
} 
 
     

<div class="wrapper"> 
 
    <div class="head"> 
 
    <h4 align="center"><b>Online Users</b></h4> 
 
    </div> 
 
    <div class="chat-sidebar"></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>