0

问题是：

  • 下拉菜单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);
});
4

3 回答 3

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);

});
于 2013-09-20T14:48:03.163 回答
1

第一个问题是子菜单是 的子菜单#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 可以而且应该被整理并提高效率，否则你会冒代码变得难以维护的风险。

这是小提琴

于 2013-09-20T15:01:05.430 回答
0

如果我理解正确，您想防止事件冒泡到父级，并且如果您单击一个菜单，则隐藏其他菜单子级。无需做一堆“检查”，只需正确处理事件即可。请注意我在下面评论“添加”的位置

赶紧看例子：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);
});
于 2013-09-20T15:55:59.040 回答