Question

当用户点击div时，我会显示一个菜单。如果用户点击页面上的其他位置，我将隐藏菜单。我也在菜单的mouseleve上隐藏菜单。

问题是一旦菜单被隐藏，然后点击'show'div不会显示它。当我再次单击div时，菜单显示。为什么会这样？当我点击页面上的其他位置时，我怀疑焦点正转移到页面上的按钮控件。我不确定这是不是背后的原因。请帮忙。

以下是示例代码：

 $(document).ready(function() {
    BindEvents();
});

function BindEvents()
 {
    $('#show').toggle(function() {
    var pEI = $("#show");
    var pTV = $("#menu");
    var position = pEI.position();

    var height = $("#show").height();

    $("#menu").css({ "left": (position.left) + "px", "top": (position.top + height) + "px" });
    $("#menu").show("slow");

}, function() {
$("#menu").hide("slow");

});

$(document).click(function() {

    $("#menu").hide("slow");
});

$('#menu').mouseleave(function() {

    $("#menu").hide();
});
}


<table>
<tr>
<div id="show"></div>
</tr>
<tr>
<asp:button></asp:button>
</tr>
<tr>
<div id="menu"></div>
</tr>

Answer 1

问题是因为您使用了'切换'。在第一次单击时，切换方法显示菜单，并在第二次单击时隐藏它（由于鼠标移出已经隐藏或单击其他地方..）。你应该使用'.click'而不是在那里切换.. 应该这样做..

单击div时，焦点将切换到按钮

1 个答案: