0

順序付けられていない（）HTMLリストを使用していくつかのSelect要素をスタイリングしています。この関数は、ユーザーが要素の領域外をクリックするとそれらの要素を非表示にする必要がありますが、何らかの理由で、ユーザーがjQueryを使用する要素をクリックすると機能しません。 UIMultiSelectウィジェット。

更新-問題を示すためにjsfiddleを作成しましたhttp://jsfiddle.net/chayacooper/ezxSF/4/クリックして「ULElement」というラベルの付いたアイテムを開きます-「 ULElement 」のドロップダウンアイテムのいずれかにマウスオーバーした場合または、ドキュメントまたは他の要素をクリックすると、期待どおりに機能しますが、[ UL要素]項目にマウスを合わせずに[ MultiSelect要素]をクリックすると、開いたままになります。

$('html').click(function(e){
  if(e.target.id == 'dropdown_box1') {
            $("#select1").show();
  } else {
            $("#select1").hide();
  }
 });

また、ユーザーが複数選択要素をクリックした場合にその要素を閉じる別の関数を作成しようとしましたが、それも機能しませんでした。

$('.multiselect').click(function() {
    $("#select1").hide();
});

HTML

<div id="dropdown_box1"><span>Select</span></div>
<div class="dropdown_container" id="dropdown_container1">  
    <ul id="select1"> 
        <!-- Several List Item Elements --> 
    </ul>
</div>

別のmouseleave関数があり、ユーザーがリスト要素からマウスを離したときにリスト要素を非表示にしますが、ユーザーがクリックして開いたがリスト要素の上にマウスを置いても起動されません。 

    $(document).ready(function () {
        $("#dropdown_box1").click(function () {
            $("#select1").show();
        });
        var timeoutID;
        $("#select1").mouseleave(function () {
              timeoutID = setTimeout(function () {
                  $("#select1").hide();
            }, 800);
        });
          $("#select1").mouseenter(function () {
            clearTimeout(timeoutID);
        });
     });
4

1 に答える 1

1

リストを非表示にするために .blur() を使用してみましたか? あなたは試すことができます：

$("#select1").blur(function(){
     $(this).hide();
});

以前に複数選択プラグインを使用したことがなく、これをテストしたこともありませんが、すべてのアイテムにイベントを追加してクリックされたときにチェックするよりも、アイテムがいつフォーカスを失ったかをチェックする方が良いと思います. それが役立つことを願っています。

更新: マルチセレクトが開かれたときのイベントがあります。この JSFiddle を見ると、これが呼び出されたときに他の選択を閉じました: http://jsfiddle.net/k8DWK/。

于 2013-03-03T11:31:15.157 に答える