jquery - 当用户单击 span 标记内的部分时，不会触发 Click 事件

Question

Click当用户单击 <span> 中的部分时，不会触发打开此元素的事件。标签，并添加单独的 click "#dropdown_box1 span" 的功能没有解决问题。

更新 - 我创建了一个 fiddle ，当您尝试单击文本 http://jsfiddle.net/chayacooper/ezxSF/12/ 时，它演示了问题。

JS

$(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);
    });
    $("#dropdown_container1 ul li a").click(function () {
        var text = $(this).find("input").val();
        var text_edited = text.replace(/_/g, " ");
        var currentHtml = $("#dropdown_box1 span").html();
        $("#dropdown_box1 span").html(currentHtml.replace(currentHtml, ''));
        $("#dropdown_box1 span").append(text_edited);
    });
    });

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>      

Answer 1

问题是你的click事件正在调用 $("#select1").show(); ，但是如果父级被隐藏，这不会有任何效果。

相反，尝试 $("#dropdown_container1").show();您可能还需要$("#select1").show(); ，这取决于该元素是否也被隐藏。

编辑:

基于你的jsFiddle，这对我有用:$(".dropdown_container ul li ul").show();

编辑2:

我的方法只有在 div 时才有效。单击，而不是 span 。试试这个:

将下拉点击事件更改为如下所示:

$("#dropdown_box1").click(function () {
    $("#select1").show();
});

给span ID:<span id="select_text">Select Text</span>

更改 $('html').click处理程序:

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

这将确保当 span 时菜单不会立即隐藏。被点击。您之前的处理程序隐藏了 select如果目标不是dropdown_box1 ，这实际上会否定 $("#select1").show();如果是 span，则从下拉列表中单击处理程序引发了该事件。

编辑3:

根据 @JohnS 的评论，建议将以下内容放在 $("#select1").show(); 之前:

$("#select1>li>ul").hide();

这完成了工作，但仍然保留了单击子菜单时应用的突出显示。它会在短时间内消失，如果没有上面的代码，子菜单也会暂时可见(我认为这是您在评论中描述的问题)。

有趣的是，这在 IE 9 中运行良好，但在 Chrome 中则不然。似乎避免这种情况的方法就是简单地让菜单为您处理鼠标点击 - $('html').click方法在技术上没有必要。

这样做的问题是单击菜单项和隐藏内容之间存在延迟。调用$("#select1").hide();在此延迟期间似乎是问题的原因。

要解决此问题，请保留 $("#dropdown_box1").click与编辑 2 中一样，删除 $('html').click处理程序，并更改 $("#select1").mouseleave对此:

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

这样做应该可以避免菜单悬停的问题，尽管这样做的视觉效果是菜单关闭得更慢。