[英]Event listener responds to first click, but does not execute .addClass() until second click
http://jsfiddle.net/gsqd4k5h/1/
當我單擊事件偵聽器(#bar)時,console.log 會觸發,但 .addClass() 不會。 我瀏覽了有關該主題的一些主題,但沒有發現任何幫助。
HTML
<div id="bar">
<div>
<div>
<span> This a reveal button </span>
</div>
</div>
<div class="hidden-section">
<div>
This is a bunch of hidden content
</div>
</div>
</div>
CSS
#bar {
overflow-y: clip;
height: 48px;
transition: height 1s;
position: absolute;
z-index: 1005;
background-color: rgb(248, 249, 250);
border: 1px solid rgb(222, 226, 230);
border-radius: 5px;
}
.bar-open {
height: 365px !important;
}
.hidden-section {
padding-top: 100px;
}
JS
$("#bar").on('click', function(event) {
console.log("click")
$("#bar").addClass("bar-open");
});
也許是這樣的:
$("#bar").on('click', function(event) { console.log("click") $(this).addClass("bar-open"); console.log($(this).attr('class')); });
#bar { overflow-y: clip; height: 48px; transition: height 1s; position: absolute; z-index: 1005; background-color: rgb(248, 249, 250); border: 1px solid rgb(222, 226, 230); border-radius: 5px; }.bar-open { height: 365px;important. }:hidden-section { padding-top; 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bar"> <div> <div> <span> This a reveal button </span> </div> </div> <div class="hidden-section"> <div> This is a bunch of hidden content </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.