Question

我的按钮有问题。我搜索了档案，但似乎找不到合适的解决方案。

我想按钮打开和关闭标题，同时我也不想在标题外点击时关闭标题

正如您在我的示例中看到的那样：http://www.danieldoktor.dk/test/test.html

我无法让它正常运作。

这是我无法工作的代码。

<div class="lists">
    <header class="box_header" id="box1">
        <h1>HEADER 1</h1>
        <div class="setting" id="btn1"></div>
        </header>

$(document).ready(function(){  

    //When mouse rolls over
    $("#btn1").click(function () { 
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'})  
    });  

    //When mouse is removed
    $("#btn1").mousedown('', function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });


    $("#box1").hover('', function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });

你们有人可以帮忙吗？

丹尼尔

Answer 1

只要按下鼠标按钮，就会触发mousedown事件。我认为你要找的是mouseleave事件:)并且不需要''作为第一个参数，只需这样做：

$("#btn1").mouseleave(function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });

实际上我建议您也使用.mouseenter()事件，而不是.hover()。

Answer 2

首先，您应该将click事件的代码更改为以下内容：

$("#btn1").click(function () { 
    if(!$("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

});

然后，您在其外部点击关闭标题的代码可能如下所示：

$(document).click(function(){
    if($("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
    }
}

$("#box1").click(function(e){
    e.stopPropagation();
}

有关如何通过单击元素外部来触发事件，请参阅this问题/答案。

使用一个按钮打开/关闭，然后使用jQuery关闭clickOutside

2 个答案: