使用Button，jQuery Script的简单AddClass和RemoveClass

时间：2018-04-02 21:58:44

标签： jquery html css

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

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

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

2 个答案:

答案 0 :(得分：1)

您需要删除课程＆＃34; tombol_atas_show＆＃34;在顶部按钮点击功能事件。

＆＃13;
＆＃13; 
 $( 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");
	});
})
＆＃13; 
.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;
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

<强> 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>

相关问题
最新问题