[英]Slide Div up and down on Click
單擊標簽后,div將打開並相應關閉。 我想要的是div應該緩慢上下滑動,而不是立即顯示。
<a href="" class="accordion">Click here</a>
<div class="panel" id="AccordionDiv">
<div class="store">
<div class="store-row">
<div class="cells store-logo text-center">
<img src="@strStaticWebsiteUrl@(objOfferPrice.StoreImage)" alt="" />
</div>
@if (objOfferPrice.Price < objOfferPrice.UrlPrice)
{
<div class="cells text-center">
<div class="product-price offer-price">Rs. @String.Format(System.Globalization.CultureInfo.InvariantCulture, "{0:0,0}", objOfferPrice.Price)<sup>*</sup></div>
<p class="real-price">Price: @objOfferPrice.UrlPrice</p>
</div>
}
</div>
</div>
這是html代碼,下面是腳本代碼。
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
jQuery為此提供了一個slideToggle方法
var panel = this.nextElementSibling;
$(panel).slideToggle();
是的,我們在JQuery的“ slideDown”,slideUp和slideToggle中提供了Animation。
$( "#ID1" ).click(function() {
$( "#book" ).slideDown( "slow", function() {
// Animation slow slideDown.
});
});
我們可以與slideUp一起使用。
而“ slideToggle”則同時用於上和下。
CSS動畫看起來也比Javascript動畫好很多。 CSS動畫可以中途取消/反轉。
Javascript:
<script>
var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("slideActive");
});
}
</script>
CSS:
.accordion {
height: 0px;
transition: 0.3s;
}
.accordion .slideActive{
height: 100px;
}
(或者您喜歡的任何樣式)
您可以使用以下方法檢查它是否active
:
this.classList.contains('slideActive');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.