Question

使用jquery的toggle实现DIV的隐藏和显示，但是无法用按钮控制，请问该如何写？

#div2{
width:300px;
height:30px;
position:fixed;
left:-260px;
bottom:0;
z-index:9;
background-color:#33CCFF;
}
#div2 #btn3{
width:40px;
float:right;
background-color:#99FF33;
}
HTML如下：

<div id="div2">这是一个可伸缩的DIV<div id="btn3">伸缩</div></div>
JQ控制代码如下：

$("btn3").click(function(){$("#div2").toggle(
function(){
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-260},300);
}
)})
但是为什么出的效果不是点btn3控制div2的隐藏和显示，鼠标在div2的任何位置都可以隐藏？？

Answer 1

$("#btn3").toggle(
    function(){     
        $("#div2").animate({left:0},300);  
    },
    function(){
        $("#div2").animate({left:-260},300);  
    }
);

toggle(fn,fn)方法的使用方法：每次点击后依次调用函数。如果点击了一个匹配的元素，则触发指定的第一个函数，第二次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则需再次点击。

Answer 2

// 点击div2，进行切换显示，隐藏
$("#div2").toggle(
    function(){ 
        $(this).animate({left:0},300);  
    },
    function(){
        $(this).animate({left:-260},300);  
});

// 点击btn3控制
$("btn3").click(function(){
    if($("#div2").css("display")=="none") {
        $("#div2").css("display","block");
    } else {
        $("#div2").css("display","none");
    }
});

Answer 3

不知道你用的是jquery哪个版本的？1.9版本 .toggle()方法删除

追问

1.4.2

追答

e晴天nl给的答案正确！