Question

问题是：

通过鼠标单击关闭下拉列表menu(#sub-button)，只有在点击可见#button
例如，当我尝试打开第二个下拉列表menu(#sub-button2)时，第一个下拉菜单会在点击#button2时立即关闭

Html代码：

<html>
<head>
<title>jquery ddm</title>
<style type="text/css">
#button {
    position:fixed;
    width:150px;
    height:40px;
    background-color:blue;
}
#sub-button {
    display: none;
    width:150px;
    height:30px;
    margin-top:41px;
    background-color:cyan;
}
#button2 {
    position:fixed;
    width:150px;
    height:40px;
background-color:orange;
}
#sub-button2 {
    display: none;
    width:150px;
    height:30px;
    margin-top:41px;
    background-color:aqua;
}
</style>
</head>
<body>
<div id="button">
        <div id="sub-button">6</div>
    </div>
<div style="clear:both"></div>
<div id="button2" style="margin-left:152px;">
        <div id="sub-button2">66</div>
    </div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>

和js代码（toggle.js）：

var myTimeout;
// show/hide sub-button menu
$( "#button" ).click(function() {
    $( "#sub-button" ).toggle();
});
// if mouse out of button and sub-button divs - close sub-button after 860ms
$( "#button" ).mouseout(function() {
    myTimeout = setTimeout( "jQuery('#sub-button').hide();",860 );
});
// if timer that are about to close sub-button is launched, stop it
// by hover button or sub-button divs
$( "#button" ).mouseover(function() {
    clearTimeout(myTimeout);
});

var myTimeout2;
$( "#button2" ).click(function() {
    $( "#sub-button2" ).toggle();
});
$( "#button2" ).mouseout(function() {
    myTimeout2 = setTimeout( "jQuery('#sub-button2').hide();",860 );
});
$( "#button2" ).mouseover(function() {
    clearTimeout(myTimeout2);
});

Answer 1

只需改变你的js：

var myTimeout;

// show/hide sub-button menu

$( "#button" ).click(function() {
    $("#sub-button2").hide();
    if (!$("#sub-button2").is(":visible")) $( "#sub-button" ).show();

});

// if mouse out of button and sub-button divs - close sub-button after 860ms

$( "#button" ).mouseout(function() {

myTimeout = setTimeout( "jQuery('#sub-button').hide();",860 );

});

// if timer that are about to close sub-button is launched, stop it

// by hover button or sub-button divs

$( "#button" ).mouseover(function() {

clearTimeout(myTimeout);
});

var myTimeout2;

$( "#button2" ).click(function() {
    if (!$("#sub-button2").is(":visible")) $( "#sub-button2" ).show();
    $("#sub-button").hide();
});

$( "#button2" ).mouseout(function() {

myTimeout2 = setTimeout( "jQuery('#sub-button2').hide();",860 );

});

$( "#button2" ).mouseover(function() {

clearTimeout(myTimeout2);

});

Answer 2

第一个问题是子菜单是#button的子项，因此点击事件将冒泡到父级，并且#button点击事件的代码将被调用。

您可以通过测试原始点击目标来解决的第一个问题：

$( "#button" ).click(function(e) {
    if(e.target.id === 'button'){

        $( "#sub-button" ).toggle();

    }

});

第二个问题是你的代码中没有你点击第二个按钮时关闭第一个按钮，反之亦然

你可以添加：

$("#button").click(function (e) {
    if (e.target.id === 'button') {
        $("#sub-button2").hide();
        $("#sub-button").toggle();
    }

});

虽然如果你以后会有更多的按钮，这个JS可以而且应该整理并提高效率，否则你就会冒着代码难以维护的风险。

这是FIDDLE

Answer 3

如果我理解正确，您希望阻止事件冒泡到父级，如果单击菜单，则隐藏其他菜单子级。无需做一堆“检查”，只需正确处理事件。注意我在下面评论“ADD”

赶紧行动中的示例：http://jsfiddle.net/gP4CV/

var myTimeout;
// show/hide sub-button menu
$("#button").click(function () {
    $("#sub-button").toggle();
    $("#sub-button2").hide();// ADD hide other child
});
// ADD prevent event bubble to parent
$("#sub-button, #sub-button2").click(function (e) {
    e.stopPropagation();
});
// if mouse out of button and sub-button divs - close sub-button after 860ms
$("#button").mouseout(function () {
    myTimeout = setTimeout("jQuery('#sub-button').hide();", 860);
});
// if timer that are about to close sub-button is launched, stop it
// by hover button or sub-button divs
$("#button").mouseover(function () {
    clearTimeout(myTimeout);
});

var myTimeout2;
$("#button2").click(function () {
    $("#sub-button2").toggle();
    $("#sub-button").hide(); // ADD hide other child
});
$("#button2").mouseout(function () {
    myTimeout2 = setTimeout("jQuery('#sub-button2').hide();", 860);
});
$("#button2").mouseover(function () {
    clearTimeout(myTimeout2);
});

下拉菜单中的jQuery问题

3 个答案: