0

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

我想要打开和关闭标题的按钮，同时在标题外部单击时我也不想关闭标题

正如您在我的示例中看到的那样：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'})  
    });

你们中的任何人都可以帮忙吗？

丹尼尔

4

2 回答 2

0

只要按下鼠标按钮，就会触发 mousedown 事件。我认为您正在寻找的是mouseleave事件 :) 并且不需要 '' 作为第一个参数，只需执行以下操作：

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

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

于 2013-02-25T10:43:34.013 回答
0

首先，您应该将点击事件的代码更改为如下所示：

$("#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();
}

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

于 2013-02-25T10:50:08.623 回答