带有按钮、jQuery 脚本的简单 AddClass 和 RemoveClass

Question

下面是一个脚本，效果不好。 单击关闭按钮时，removeclass 无法正常工作。 单击关闭 div / 类时不会删除。我正在寻找他的错误，但我很困惑。

也许可以纠正？我很感激。非常感谢。

 $( document ).ready(function() {
	$(".tombol_bawah").click(function(){
		$(".top-btn").addClass('tombol_atas_show');
		$(".chat_partty_side").addClass('tampilkan_list_chat');
		$(this).addClass('tombol_bawah-hide')
	});

	$(".top-btn").click(function(){
		$(".tombol_bawah").removeClass('tombol_bawah-hide');
		$(".chat_partty_side").removeClass('tampilkan_list_chat');
	});
})

.chat_partty_side {
     overflow: hidden;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tampilkan_list_chat {
    background: red;
    height: 95%;
    display: block;
    width: 219px;
    bottom: 0;
    right: 0;
    position: fixed;
    border-radius: 0;
    padding-bottom: 30px;
 }
 
 .top-btn {
    top: 15px;
    right: 15px;
    color: #98D1EC;
	padding:9px;
    text-align: center;
    width: 43px;
    height: 43px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
     opacity: 0;
 }
 
 .top-btn:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     background: #7EC6E7;
     color: #fff
 }
 
 .tombol_atas{

     font-size: 20px;
     color: red;
     background: #FFF;
 }
 
  .tombol_bawah {
     position: fixed;
	 cursor:pointer;
     bottom: 33px;
     right: 30px;
     color: #FFF;
     background:blue;
     padding: 21px;
     text-align: center;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     opacity: 1;
 }
 
 
 
 .tombol_bawah:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #fff
 }
 
 .tombol_atas_show {
     opacity: 1 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tombol_bawah-hide {
     opacity: 0 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

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

<div class="chat_partty_side">
  <div class="tombol_atas">
    <div class="top-btn">X Close</div>
  </div>
  <p>List Chat 1</p>
  <p>List Chat 2</p>
  <p>List Chat 3</p>
  <p>List Chat 4</p>
</div>
<div class="tombol_bawah">Open</i></div>

Answer 1

您需要删除顶部按钮单击功能事件上的“tombol_atas_show”类。

 $( document ).ready(function() {
	$(".tombol_bawah").click(function(){
		$(".top-btn").addClass('tombol_atas_show');
		$(".chat_partty_side").addClass('tampilkan_list_chat');
		$(this).addClass('tombol_bawah-hide')
	});

	$(".top-btn").click(function(){
		$(".tombol_bawah").removeClass('tombol_bawah-hide');
		$(".chat_partty_side").removeClass('tampilkan_list_chat');
                $(this).removeClass("tombol_atas_show");
	});
})

.chat_partty_side {
     overflow: hidden;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tampilkan_list_chat {
    background: red;
    height: 95%;
    display: block;
    width: 219px;
    bottom: 0;
    right: 0;
    position: fixed;
    border-radius: 0;
    padding-bottom: 30px;
 }
 
 .top-btn {
    top: 15px;
    right: 15px;
    color: #98D1EC;
	padding:9px;
    text-align: center;
    width: 43px;
    height: 43px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
     opacity: 0;
 }
 
 .top-btn:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     background: #7EC6E7;
     color: #fff
 }
 
 .tombol_atas{

     font-size: 20px;
     color: red;
     background: #FFF;
 }
 
  .tombol_bawah {
     position: fixed;
	 cursor:pointer;
     bottom: 33px;
     right: 30px;
     color: #FFF;
     background:blue;
     padding: 21px;
     text-align: center;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     opacity: 1;
 }
 
 
 
 .tombol_bawah:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #fff
 }
 
 .tombol_atas_show {
     opacity: 1 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tombol_bawah-hide {
     opacity: 0 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

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

<div class="chat_partty_side">
  <div class="tombol_atas">
    <div class="top-btn">X Close</div>
  </div>
  <p>List Chat 1</p>
  <p>List Chat 2</p>
  <p>List Chat 3</p>
  <p>List Chat 4</p>
</div>
<div class="tombol_bawah">Open</i></div>

Answer 2

如果需要隐藏关闭btn，需要在$(".top-btn").click(function(){后面加上$(".top-btn").removeClass("tombol_atas_show");

UPD：

 $( document ).ready(function() {
	$(".tombol_bawah").click(function(){
		$(".top-btn").addClass('tombol_atas_show');
		$(".chat_partty_side").addClass("tampilkan_list_chat");
		$(this).addClass("tombol_bawah-hide");
    $(".chats-list").removeClass("chats-list-hide");
	});

	$(".top-btn").click(function(){
    if (!$(".tombol_bawah").hasClass("tombol_bawah-hide")) {
        $(".chats-list").addClass("chats-list-hide");
        $(this).removeClass("tombol_atas_show");
    }
    
		$(".tombol_bawah").removeClass("tombol_bawah-hide");
		$(".chat_partty_side").removeClass("tampilkan_list_chat");
	});
})

.chat_partty_side {
     overflow: hidden;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tampilkan_list_chat {
    background: red;
    height: 95%;
    display: block;
    width: 219px;
    bottom: 0;
    right: 0;
    position: fixed;
    border-radius: 0;
    padding-bottom: 30px;
 }
 
 .top-btn {
    top: 15px;
    right: 15px;
    color: #98D1EC;
	padding:9px;
    text-align: center;
    width: 43px;
    height: 43px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
     opacity: 0;
 }
 
 .top-btn:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     background: #7EC6E7;
     color: #fff
 }
 
 .tombol_atas{
     font-size: 20px;
     color: red;
     background: #FFF;
 }

.chats-list-hide {
  display: none;
}
 
  .tombol_bawah {
     position: fixed;
	 cursor:pointer;
     bottom: 33px;
     right: 30px;
     color: #FFF;
     background:blue;
     padding: 21px;
     text-align: center;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     opacity: 1;
 }
 
 
 
 .tombol_bawah:hover {
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #fff
 }
 
 .tombol_atas_show {
     opacity: 1 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 .tombol_bawah-hide {
     opacity: 0 !important;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

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

<div class="chat_partty_side">
  <div class="tombol_atas">
    <div class="top-btn">X Close</div>
  </div>
  <div class="chats-list">
    <p>List Chat 1</p>
    <p>List Chat 2</p>
    <p>List Chat 3</p>
    <p>List Chat 4</p>
  </div>
  
</div>
<div class="tombol_bawah">Open</i></div>