0

我正在使用 unordered () HTML 列表设置一些 Select 元素的样式，当用户单击元素区域之外的任何位置时，此函数应该隐藏这些元素，但由于某种原因，当用户单击使用jQuery的元素时它不起作用UI 多选小部件。

更新- 我创建了一个 jsfiddle 来演示问题http://jsfiddle.net/chayacooper/ezxSF/4/单击以打开标有“UL 元素”的项目 - 如果您将鼠标悬停在“UL 元素”的任何下拉项目上或单击文档或按预期工作的其他元素，但如果您单击“MultiSelect Element”而不将鼠标悬停在任何“UL Element”项目上，它仍然处于打开状态。

$('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 回答