1

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

更新 -我创建了一个小提琴，当您尝试单击文本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>
4

3 回答 3

1

我根据您提供的内容创建了一个 JSFiddle ，它似乎有效：

<div id="dropdown_box1"><span>Select</span></div>
<div class="dropdown_container" id="dropdown_container1">  
    <ul id="select1"> 
        <li>Item</li>
    </ul>
</div>

您可以修改它以复制问题吗？

编辑：

更改点击处理程序：

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

到：

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

现在你也可以改变这个：

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

对此：

$('html').click(function (e) {
     $("#select1").hide();
});
于 2013-03-03T20:13:32.233 回答
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单击 时不会立即隐藏菜单。您之前的处理程序隐藏了selectif 目标不是，如果它引发了事件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();
});

这样做应该可以避免菜单挂起的问题，尽管这样做的视觉效果是菜单会更慢地关闭。

于 2013-03-03T20:43:21.843 回答
1

乔德斯的回答很好。我很好奇是否有办法做到这一点而不必更改'#dropdown_container1'元素的点击处理程序。

<html>您可以将元素的单击处理程序更改为：

$('html').click(function (e) {
    if ($(e.target).is('#dropdown_box1') || ($('#dropdown_box1').has(e.target).length > 0))     {
        $("#select1").show();
    } else {
        $("#select1").hide();
    }
});

你真的不需要.show()在这里做。这可以缩短为：

$('html').click(function (e) {
    if (!$(e.target).is('#dropdown_box1') && ($('#dropdown_box1').has(e.target).length == 0))     {
        $("#select1").hide();
    }
});

太糟糕了 jQuery 没有一种方法可以让它更具可读性，比如isDescendantOf()or hasDecendant()。

于 2013-03-03T22:25:06.940 回答