jquery - 使用选择列表切换 div 的可见性

Question

我有一个选择列表：

<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Menu</option>
<option value="http://google.com" class="home">1</option>
    <option value="http://google.com" class="home">2</option>
</select>

我还有一个 div，当点击或单击选择列表时（在选项下方），它将覆盖整个屏幕：

<div class="overlay"></div>

Using jQuery I'd like to show/hide this overlay depending on the state the select is in. So if I open the select list, I want the overlay div to fade in and when the select list is closed or an option is selected I '希望叠加层淡出。

我无法让我的 jQuery 工作：

$('#cd-dropdown').onchange( function() {
    $( '#overlay' ).toggle.fadeIn();
    $( '#overlay' ).toggle.fadeOut();
});

Answer 1

您应该使用.change()绑定，而不是.onchange(). 也删除.toggle，只需使用.fadeIn()or .fadeOut()。

编辑：我添加了一个jsFiddle来更好地解释。您可能应该检测onfocus到在叠加层中淡入淡出的onblur事件，以及将其淡出的事件。像这样的东西：

$("#cd-dropdown").change(function(event) {
    $("#cd-dropdown").blur();
}).focus(function() {
    $(".overlay").fadeIn();
}).blur(function() {
    $(".overlay").fadeOut();
});

Answer 2

尝试

$('#overlay').fadeToggle();

或者，更准确地说，

$('#cd-dropdown').onchange( function() {
     if($('#cd-dropdown').value == 1)
         $('#overlay').fadeIn();
     else if($('#cd-dropdown').value == 2)
         $('#overlay').fadeOut();
}