1

ドロップダウンコンボボックスを作成しようとしています（今回はJQueryプラグインを試したくありませんでした）。

これは私のHTMLです：

<div style="display: table-cell; width:150px; z-index:-1;" id="supdiv">
        <input size='10' id='supinput'>
            <div id='supsel' style='position:absolute;z-index:0;background-color:#b0c4de;'>
            <input type ='checkbox' value='0' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='1' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='2' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='3' id = 'supplier[]' name='supplier'>A</br>

            <input type='button' value='OK' id='supclose'>
            </div>
</div>

ページが読み込まれると、supseldivを非表示にします。

$('#supsel').hide();

焦点がsupinputになると、divを表示します。また、OKボタンをクリックするとdivを非表示にします。

$('#supinput').focus(function(){
            $('#supsel').show()
    }); 
 $('#supclose').click(function(){
            $('#supsel').hide()
    });

今私の問題は、ユーザーがページ上の他の場所をクリックしたり、フォーカスが他の入力や領域に移動したりした場合にdivを非表示にしたいのですが、ユーザーがチェックボックスを選択するまでdivを表示し続けたい、または焦点はSUPSELにあります。それ、どうやったら出来るの？

4

1 に答える 1

2

jsBinデモ

</br>すべきであり<br />
、<input><input />

追加するだけではありません：

$('#supdiv').on('click',function(e){
    e.stopPropagation(); // prevent clicks on your parent div to propagate to doc.
});
$(document).on('click focusout',function(event){   // register clicks focusouts
  if(event.target.id !== 'supdiv'){  // if click was not on your parent bropbox
    $('#supsel').hide();             // than do something about it! ;)
  }  
});
于 2012-11-12T13:39:57.970 に答える