Почему 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> 

и CSS для этого HTML:

.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; 
} 

и теперь я скользящим главный chat-sidebar DIV с помощью функции JQuery, как:

$(document).ready(function() { 

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


}); 

slideToggle работает нормально, когда нажимают .chat_head div. Но он идет слишком далеко, так что он больше не виден (вне экрана). Что мне здесь не хватает?

Answer 1

Вам нужно сдвинуть .chat_body вместо всей обертки div. Поэтому просто удалите height с .chat-sidebar и переместите его на .chat_body. Теперь примените функцию slideToggle() на .chat_body:

$(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>