Question

我正在尝试使用两个简单元素创建自定义下拉列表 - 下拉标题为div，包含项目的div。单击header-div时，将打开items-div，当items-div失去焦点时，将关闭它。

代码（HTML）：

<div id="dd_header" style="width:200px;height:20px;border:1px solid gray"></div>
<div id="dd_items" style="width:200px;height:200px;border:1px solid gray">
    Item 1<br/>
    Item 2<br/>
    Item 3<br/>
</div>

代码（JS）：

$("#dd_items").hide();

$("#dd_header").click(function () {
    $("#dd_items").show();
});

$("#dd_items").focusout(function () {
    $("#dd_items").hide();
});

jsFiddle - http://jsfiddle.net/FLnHG/

出于某种原因， focusout事件未触发。我错过了什么？

（注意：在focusout上添加#dd_header有效，但这无济于事，因为用户无法从项目中进行选择。）

Answer 1

在准备好的时候添加js代码并使用mouseout

$(document).ready(function(){
   $("#dd_items").hide();

   $("#dd_header").click(function () {
      $("#dd_items").show();
   });

   $("#dd_items").mouseout(function () {
      $("#dd_items").hide();
   });
});

Answer 2

您可以尝试这种方式：

$("#dd_items").hide();

$("#dd_header, #dd_items").click(function (e) {
    e.stopPropagation(); ///<----this stops the event to bubble up at document
    $("#dd_items").show();
});


$(document).click(function () {
    $("#dd_items").hide();
});

Updated Fiddle

Answer 3

focus事件适用于一组有限的元素，例如表单元素（，等）和链接（）。

变化：

<div id="dd_header"></div>

到

<input type ="text" id="dd_header" />

JS：

$("#dd_header").focusout(function () {    
    $("#dd_items").hide();
});

DEMO here.

Answer 4

Item 1<br/>
Item 2<br/>
Item 3<br/>

这是文本和文字无法获得焦点，因此无法触发焦点事件，您需要有链接或控制而不是此。check this fiddle

Answer 5

试试这个：

$(document).ready(function(){
       $("#dd_items").hide();

       $("#dd_header").click(function () {
          $("#dd_items").show();
       });

       $("#dd_items").mouseleave(function () {
          $("#dd_items").hide();
       });
    });

Answer 6

HTML：

<div id="dd_header" tabindex="-1"></div>
<div id="dd_items">
    Item 1<br/>
    Item 2<br/>
    Item 3<br/>
</div>

jQuery的：

$("#dd_items").attr('tabindex',-1).focus(function () {

    });

    $(window).focusout(function () {
        $("#dd_items").hide();
    });

Answer 7

嗯，我不确定你对这个问题的确切要求，但看到其他答案的评论，我想出了一个modification to your own fiddle。

我选择在不使用jQuery的情况下完成它。这是一个非常简单的CSS解决方案，也许你想要的。只有差异（如果有的话）是列表将在悬停时切换（而不是像计划中那样点击）

试试fiddle并告诉我们它是否适合你。

<强> HTML

<div id="dd_header">
    <div id="dd_items">
        <ul style="list-style-type:none;">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</div>

<强> CSS

#dd_header {
    height: 20px; 
    width: 200px; 
    border: 1px solid lightgray;
}

#dd_items {
    display: none; 
    position: absolute; 
    height:200px; 
    width: 200px; 
    background: #fbfbfb;}

#dd_header:hover #dd_items {display: block;}

focusout（）没有按预期工作（在这个非常基本的例子中）

7 个答案: