将 IF 语句添加到 jquery

Question

我正在尝试添加向下滑动效果以在我单击图像时显示隐藏的 div 并且在 div 可见时单击同一图像时我希望它向上滑动并再次隐藏内容。

这是我正在使用的脚本：

<script>
$(document).ready(function(){

    $("button").click(function(){
        $(".content").slideUp();
    });
    $("button").click(function(){
        $(".content").slideDown();
    });
});
</script>

.content{
    display: none;
}

<body>
        <button><img src="image.jpg"/></button>
        <div class="content">
        stuff here
        </div>
</body>

我希望有一个 IF 内容比 slideup() else slidedown() 可见我只是在添加到现有脚本时遇到了问题。

Answer 1

利用jQuery的.slideToggle()方法http://api.jquery.com/slidetoggle/

$(document).ready(function(){

    $("button").click(function(){
        $(".content").slideToggle();
    });
});

编辑： 要在按钮和它们切换的内容之间创建对应关系，请使用 jQuery 的 .next() 方法 select正确的内容。

$(document).ready(function(){

    $("button").click(function(){
        // gets the button's immediate next sibling, 
        // which is the '.content' div (according to your html) 
        $(this).next().slideToggle(); 
    });
});

将 IF 语句添加到 jquery

Adding an IF statement to jquery

html

jquery

if-statement

slidedown

slideup