Javascript 如何在单击div时添加反弹效果

我在这个网站上看到了关于这个主题的其他教程，但是这本不同于所有其他的教程

我发现这篇教程叫做“为幻灯片添加反弹”。这是它的基本原理

我已经把它的一切应该是，就像在那个教程，但我不想要两个按钮代表关闭和打开，我只想要一个按钮的图像，像一个箭头。然后，当你点击箭头时，它会随着信息和类似的东西向下滑动，然后，当你再次点击箭头时，它会滑动并隐藏信息

该教程可以做到这一点，但它有两个ID表示关闭按钮和打开按钮，我不希望这样

这是该教程的JS代码，还有更多，但这是它的影响和类似的东西

$(document).ready(function() {
    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow", "easeOutBounce");
    });          
    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow");  
    });    

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  
});    

你看到打开和关闭了吗？表示切换按钮的两个ID

我真的想知道如何删除关闭，关闭将代表打开，因此，当您单击打开时，它将打开，当您再次单击打开时，它将自己关闭，而无需另一个ID

我一直想弄明白，但是弄不明白

---

请告诉我，要实现这一点，我应该做些什么。

您可以尝试

slideToggle（）

例如：

使用

$（“#panel”）.toggle（“bounce”，{times:2}，“slow”）

有关更多示例，请访问：

它使用以下外部js文件：

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

如果箭头元素的ID为“toggle”，则可以执行以下操作：

$(document).ready(function () {
    $("#toggle").click(function () {
        var $panel = $('#panel');
        if ($panel.is(':visible')) {
            $panel.slideUp("slow");
        } else {
            $panel.slideDown("slow", "easeOutBounce");
        }
    });
});

你能在@Zword上编写HTML代码或创建一个提琴吗？这家伙给了本教程一个演示。下面是“看我的更新版”的例子answer@Zword是的，我有，但约翰·S帮助了我。谢谢你的帮助。我有一个问题，当你点击切换时，它隐藏了一半的内容。当您单击切换时，滚动条跟随内容。@user3184347-这在我创建的JSFIDLE中不会发生。我认为它发生在你的代码中。您能在JSFIDLE中重现这个问题吗？您可能希望为此问题创建一个新问题。
$(document).ready(function () {
    $("#toggle").click(function () {
        var $panel = $('#panel');
        if ($panel.is(':visible')) {
            $panel.slideUp("slow");
        } else {
            $panel.slideDown("slow", "easeOutBounce");
        }
    });
});