0

問題は次のとおりです。

  • ドロップダウンmenu(#sub-button)はマウスのクリックで閉じます。表示されているものをクリックした場合にのみ閉じる必要があります#button
  • たとえば、2 番目のドロップダウンを開こうとすると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

最初の問題は、サブメニューが の子である#buttonため、クリック イベントが親にバブル アップし、#buttonクリック イベントのコードが呼び出されることです。

元のクリックされたターゲットをテストすることで解決できる最初の問題:

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

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

    }

});

2 番目の問題は、2 番目のボタンのクリック時に最初のボタンを閉じているコードのどこにもないことです。

追加できます：

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

});

後でボタンを増やす場合は、この JS を整理して効率化する必要があります。そうしないと、コードの保守が困難になるリスクがあります。

ここにフィドルがあります

于 2013-09-20T15:01:05.430 に答える
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 に答える
0

よくわかりましたが、親へのイベント バブルを防止し、メニューをクリックすると、他のメニューの子を非表示にします。一連の「チェック」を行う必要はありません。イベントを適切に処理するだけです。以下の「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);
});
于 2013-09-20T15:55:59.040 に答える