JQuery проблемы с выпадающим меню

проблем:JQuery проблемы с выпадающим меню

Выпадающее 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); 
});

источник

2013-09-20 Sevar

lee_gladding спасибо за предложение, это сделано не только проблемы, но я четко понимаю you'r код и может внести некоторые изменения или сделать другие кнопки. Большое спасибо! ReDEyeS, спасибо вам за ответ, я рассмотрю эту часть кода. – Sevar

Первый вопрос заключается в том, что подменю является дочерним #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 может и должно быть убрано и сделал больше effic в противном случае вы рискуете, что код будет трудно поддерживать.

вот FIDDLE

источник

2013-09-20 15:01:05

просто изменить ваши 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-20 14:48:03 ReDEyeS

Если я вас понимаю правильно, вы хотите, чтобы предотвратить пузырь событий для родителя, и если вы нажмете меню, скрыть другое меню ребенка. Не нужно делать кучу «проверки», просто обрабатывайте события должным образом. Обратите внимание, где я комментирую «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-20 15:55:59

JQuery проблемы с выпадающим меню

ответ

Смежные вопросы