jquery - jQuery 和恢复默认设置

Question

我有以下代码：

$(document).ready(function(){
   $("#cont").hide();
   $("#slide").show();

   $('#slide').click(function(){
       $("#cont").slideToggle();
       $("#slide").css("background-image", "url('img/slideup.png')");
   });
});

代码只是调用 div 在单击另一个 div 并返回后从无处向下滑动。在开始时，就像在 CSS 中一样，我将图标设置为向下箭头，然后单击后它变为向上，它将保持这样的状态。我根本不知道如何根据 div 状态使其“toogle”。我已经尝试了很多东西，但脚本只是掉了下来，谁能给我一些线索或使 bg 图像切换的代码？像正确的 div 声明，因为我没有工作......

非常感谢！

Answer 1

在这里试试这个例子让你开始我会在css而不是javascript中设置初始显示。

$(document).ready(function(){

       var slid = false,
           toggleState = function(state){

               // Figure out which direction to go.
               var direction = state ? "slideUp" : "slideDown",
                   url = state ? "img/slideup.png" : "img/slidedown.png";

               // Do the slide.
               $("#cont")[direction]();
               $("#slide").css("background-image", "url(" + url + ")" );

               // Change the state 
               slid = !state;

           };

    $('#slide').click(function(){

        toggleState(slid);

    });

});

Answer 2

不是 100% 确定你的意思，但你可以尝试这样的事情：

$('#slide').click(function(){
    if ($("#cont").is(':hidden')) {
        $("#cont").slideDown(400,function () {
            $("#slide").css("background-image", "url('img/slideup.png')");
        });
    }
    else {
        $("#cont").slideUp(400,function () {
            $("#slide").css("background-image", "url('img/slidedown.png')");
        });
    }
});