javascript - 检测下拉打开

Question

有什么方法（在普通的 JS 或 jQuery 中）可以准确地检测到那一刻，下拉（选择标签）打开了吗？为了澄清更多，一个小例子：

如果您在选择上单击 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

到目前为止，我只能找到 click/focus in/focus out 的事件。

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>

查询：

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

jsFiddle 在这里

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);
});

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

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

希望这会有所帮助，干杯。