0

ユーザーが「ここをクリック」という言葉をクリックして、ドロップダウンの表示/非表示を切り替えられるようにしたい。これはうまくいきます。また、ユーザーがドロップダウン領域の外をクリックして、現在表示されている場合はドロップダウンメニューを非表示にできるようにしたいと考えています。どうすればいいですか？

jquery:

function dropDown() {
    $(document).ready(function(){
        $('#myID').load('my_file.php',function(){
            document.getElementById("myID").style.visibility="visible";
            $('#myID').slideToggle('fast');
        })
        return false;
    });
}

HTML:

<div onclick="dropDown()">Click Here</div>
<div id="myID"></div>

CSS:

#myID {
visibility:hidden;
z-index:9999;
display:none;
}
4

3 に答える 3

2

visibility:hiddenコードから属性を削除します

divと の両方のクリック ハンドラをアタッチします。document

$('.dropdown').on('click', function(e) {
    e.stopPropagation();
    $('#myID').slideToggle('fast');
});

$(document).on('click', function(e) {
    if( $(e.target).hasClass('dropdown') || $(e.target).attr('id') === 'myID'){

    }
    else{
      $('#myID').hide();     
    }
});
​

CSS

#myID {
    z-index:9999;
    display:none;
    width:200px;
    height:300px;
    background-color: orange;
}​

フィドルをチェック

コードで使用する場合visibility:hiddenは、を省略する必要がありdisplay:none、その逆も同様です...

于 2012-12-05T22:42:05.020 に答える
-1 
function dropDown() {
        $('#myID').load('my_file.php',function(){
            document.getElementById("myID").style.visibility="visible";
            $('#myID').slideToggle('fast');
        });

        $(':not(#myId)').bind('click', toggleDropdown);

        return false;

}

var toggleDropdown = function() {
      $('#myID').slideToggle('fast');
      $(':not(#myId)').unbind('click', toggleDropdown);
};
于 2012-12-05T22:44:01.647 に答える
-1

内部をクリックするには、すでに jQuery を使用しているため、次の HTML が必要です。

<div id="myDropdown">Click Here</div>

jQuery の場合:

$('#myDropdown').click( function(e){
        $('#myID').load('my_file.php',function(){
            $('#myID').show('fast');
            e.stopPropagation();
        })
        return false;
  });

次に、クリックしたときにロールアップするが、 ではロールアップしないようにするにはmyDropdown、jQuery を次のようにする必要があります。

$(":not(#myDropdown)").click(function(){
      $('#myID').hide('fast');
});

動作するフィドルを参照してください: http://jsfiddle.net/sablefoste/2YuLy/

于 2012-12-05T22:43:32.427 に答える