Question

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

我发现这个教程名为“向下滑动添加弹跳”。这是link。

我已经把所有内容都放在了原样，就像在那个教程中一样，但是我不想要两个代表关闭和打开的按钮，我只想要一个带有图像的按钮，就像箭头一样。然后，当您单击箭头时，它将使用信息和那些东西进行slideDown，然后，当您再次单击箭头时，它将会滑动，它将隐藏信息。

该教程可以做到这一点，但它有两个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();
    });  
});

你看到#open和#close了吗？表示切换按钮的两个ID'。

我真的想知道如何删除关闭，而close将代表open，所以当你点击打开时它会打开，当你再次点击打开时，它会关闭它而没有另一个ID。< / p>

我一直试图解决这个问题，但无法弄明白。

请告诉我，我必须做些什么才能实现这一目标。

Answer 1

你可以尝试slideToggle() 例如：

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

Answer 2

使用$( "#panel" ).toggle( "bounce", { times: 2 }, "slow" );;

`See this demo`

有关更多示例，请访问：http://api.jqueryui.com/bounce-effect/

它使用以下外部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>

Answer 3

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

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

jsfiddle

单击div时如何添加跳出效果

3 个答案:

`See this demo`