单击时上下滑动 div

Posted 2023-05-08

【中文标题】单击时上下滑动 div

【英文标题】：Slide Div up and down on Click

【发布时间】：2018-06-04 00:13:43

【问题描述】：

点击标签后，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)"  />
                    </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>

【问题讨论】：

你应该只在 div 上添加或删除一个类，而较少的 css 会向上滑动

Animate CSS display的可能重复

可以使用切换功能api.jquery.com/toggle

【参考方案1】：

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

CSS：

.accordion 
    height: 0px;
    transition: 0.3s;

.accordion .slideActive
    height: 100px;

（或任何您喜欢的样式）

---

您可以使用以下命令检查它是否为active：

this.classList.contains('slideActive');

【讨论】：

已更新。试试这个。

在你也使用过 active 的脚本中，但是你从 css 中删除了它

this.classList.toggle("active");这条线如何工作

是的，我试图保持您的代码基本完整，但是 CSS 应该应用于 nextSibbling 元素，对吗？所以我添加了一个slideActive 类。但我猜你可以删除active 切换。

谢谢先生。 var Accordion = this.nextElementSibling; $(手风琴).slideToggle();这是应该做的。

【参考方案2】：

jQuery 为这个效果提供了一个slideToggle 方法

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

【参考方案3】：

是的，我们在 JQuery "slideDown"、slideUp 和 slideToggle 中有动画。

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

我们可以使用相同的 slideUp。

“slideToggle”同时适用于 Up 和 Down。