Question

我正在尝试添加一个滑动效果来显示一个隐藏的div当我点击一个图像时，当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（）其他slidedown（）我只是在添加到现有脚本时遇到问题。

Answer 1

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

$(document).ready(function(){

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

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

$(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

1 个答案: