Question

有没有办法（在简单的JS或jQuery中）确切地检测到那个时刻，下拉（select-tag）打开了？为了澄清更多，一个小例子：

如果您在选择上单击5次，则会发生以下情况：

drop down opens   > Event should fire
drop down closes
drop down opens   > Event should fire
drop down closes
drop down opens   > Event should fire

到目前为止，我只能找到点击/焦点/焦点的事件。

Answer 1

看看这段代码：

HTML：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<select id="fire">
    <option>One</option>
    <option>Two</option>
</select>
<p></p>

JQuery的：

var flag=1;
$("#fire").click(function(){
    if(flag==1){
         $("p").append("clicked   ");
        flag=0;
    } else {
         flag=1;   
    }
});
$("#fire").blur(function(){
         flag=1; 
});

jsFiddle is here

Answer 2

var select = document.getElementById('mySelect');

mySelect.addEventListener('mousedown', function() {
    console.log('mousedown event fired on mySelect');
});

看到这个小提琴：http://jsfiddle.net/ToddT/hYT9q/

Answer 3

从@Todd

中扩展一点答案

var select = document.getElementById('mySelect');

mySelect.addEventListener('mousedown', function() {
    if( $(this).attr("data-IsOpen") == 1 ){
      $(this).attr("data-IsOpen", 0); //it's closed
    }else{
      $(this).attr("data-IsOpen", 1); //it's open
    }
    var isOpen = ($(this).attr("data-IsOpen") == 1); //should give true or false
    console.log(isOpen);
});

我们正在做的是为元素添加一些属性，在这种情况下，当你第一次点击一个select元素时，它会询问它的data-IsOpen属性，因为它不存在，我们将用它初始化它a 1，表示选择已打开。

当我们再次点击它时，我们会问同样的，现在它已打开，我们会将属性更新为0，表示它已关闭。

希望这有帮助，干杯。

检测下拉列表打开

3 个答案: