0

選択リストがあります：

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

2 に答える 2

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();
});
于 2013-02-19T19:07:02.470 に答える
0

試す

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

または、より正確には、

$('#cd-dropdown').onchange( function() {
     if($('#cd-dropdown').value == 1)
         $('#overlay').fadeIn();
     else if($('#cd-dropdown').value == 2)
         $('#overlay').fadeOut();
}
于 2013-02-19T18:59:33.810 に答える