0

我有一个固定的页脚，我希望在单击图标时将其最小化

这是我的小提琴 http://jsfiddle.net/Qy6Sj/693/ 

#window{
width:400px;
border:solid 1px;
}

#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
.bar{margin-top:50px;}
4

8 回答 8

2

实际上，您已将切换功能放置在点击内部，因此无法正常工作，将切换功能置于点击外部即可正常工作，但将 + 更改为 - 号

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
});

    $("#button").toggle(
  function() {
    $("#title_bar").animate({ marginTop: "50px" }, 500)
  },
  function() {
    $("#title_bar").animate({ marginTop: "0px" }, 500);
  }
);

工作小提琴

或者你可以这样做

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});

在这里提琴

于 2013-09-13T07:28:33.827 回答
2

请尝试这种方式

$("#button").click(function(){
    var _self = $(this);
    if(_self.hasClass('active')){

        $("#title_bar").animate({ marginTop: "0px" }, 500,function(){
            _self.html("+");      
            _self.removeClass('active');  
        });
    }
    else{

        $("#title_bar").animate({ marginTop: "50px" }, 500,function(){
            _self.addClass('active');            
            _self.html("-");
        });
    }

});

工作演示

于 2013-09-13T07:51:11.780 回答
1 
$("#button").on("click", function(){
if($(this).html() == "-"){
    $(this).html("+");
    $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
    $("#title_bar").animate({ marginTop: "50px" }, 500)
}
});

这行得通。

单击和切换组合不起作用的原因是切换本身是基于单击的事件。因此，您实际上将单击事件加倍并使其堆叠。

于 2013-09-13T07:28:50.937 回答
0

尝试这个，

$(function(){
    $("#button").on('click',function(){
        var html= ($(this).html() == "-") ? '+' : '-';
        var mr= ($('#title_bar').css('marginTop') == "0px") ? '50px' : '0px';
        $(this).html(html);
        $("#title_bar").animate({ marginTop: mr }, 500)
    });
});
于 2013-09-13T07:37:13.287 回答
0

这是一个非常简单的尝试这个DEMO HERE

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});
于 2013-09-13T08:40:29.553 回答
0

Toggle还使用了单击动作和动画，因此您无需使用两次！您非常接近解决方案:-)。如果你愿意，你也可以只使用切换。

这会做你想要的！

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
        $("#title_bar").animate({ marginTop: "50px" }, 500)
    }
    else{
        $(this).html("-");
         $("#title_bar").animate({ marginTop: "0px" }, 500);
    }  
});
于 2013-09-13T07:28:42.873 回答
0

将您的 javascript 更改为此：

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");

        $("#title_bar").animate({ marginTop: "50px" }, 500)

    }
    else{
        $(this).html("-");

    $("#title_bar").animate({ marginTop: "0px" }, 500);

    }

});
于 2013-09-13T07:28:44.090 回答
0

我认为这是您正在寻找的东西：

JSFiddle 

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
        $("#box").animate({ height: "0px" }, 500);
    } else {
        $(this).html("-");
        $("#box").animate({ height: "250px" }, 500);
    }  
});
于 2013-09-13T07:30:23.423 回答