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>

使用jQuery我想显示/隐藏此叠加层，具体取决于选择所处的状态。所以，如果我打开选择列表，我希望叠加div淡入，当选择列表关闭或选项时被选中我想要叠加淡出。

我无法让我的jQuery工作：

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

Answer 1

您应该使用.change()作为绑定，而不是.onchange()。同时删除.toggle，只需使用.fadeIn()或.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();
}

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

2 个答案: