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

不是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')");
        });
    }
});

Answer 2

在此尝试此示例以获取started我将在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);

    });

});

jQuery并返回默认设置

2 个答案: