Javascript 单击时上下滑动Div

单击标记时，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>

@if（objOfferPrice.Price价格：@objOfferPrice.UrlPrice

}

这是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>

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

jQuery提供了一种方法来实现这种效果

var panel = this.nextElementSibling;
$(panel).slideToggle();

---

是的，我们有JQuery“slideDown”、slideUp和slideToggle中的动画

$( "#ID1" ).click(function() {
  $( "#book" ).slideDown( "slow", function() {
    // Animation slow slideDown.
  });
});

我们也可以使用slideUp

“slideToggle”用于上下两个方向。

使用CSS 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>

.accordion {
    height: 0px;
    transition: 0.3s;
}
.accordion .slideActive{
    height: 100px;
}

（或您喜欢的任何样式）

---

您可以使用以下方法检查它是否处于活动状态：

this.classList.contains('slideActive');

---

您只需在div上添加或删除一个类，较少的css就可以使用更新的toggle函数。试试这个。在脚本中，您也使用了active，但从cssthis.classList.toggle（“active”）中删除了它；这行代码是如何工作的呢？是的，我尽量保持代码的完整性，但是CSS应该应用到

nextSibbling

元素，对吗？因此，我添加了一个

slideActive

类。但是我想您可以删除

活动的

开关。谢谢您，先生。var Accordion=this.nextElementSibling$（手风琴）。滑动切换（）；这是应该做的。