[英]How to make dropdown menu disappear after a certain amount of time JavaScript
I have a side menu that drops down when you hover over the Section One within the tag. 当您将鼠标悬停在标记中的“第一节”上时,我会看到一个下拉菜单。 I want to know how to get the JavaScript code to repeat itself to check what state the list is in again after a certain amount of time so that the menu closes. 我想知道如何获取JavaScript代码以重复自身,以检查在一定时间后列表再次处于什么状态,以便菜单关闭。 Can anyone please help me? 谁能帮帮我吗?
HTML 的HTML
<div class = "sidebarwrap">
<ul>
<li>
<a href="#" onmouseover="toggle(this); return true;" onmouseout="timer()">Section One</a>
<ul>
<li><a href="#" >link page</a></li>
<li><a href="#" >link page</a></li>
<li><a href="#" >link page</a></li>
<li><a href="#" >link page</a></li>
</ul>
</li>
</ul>
</div>
CSS 的CSS
.sidebarwrap{
width:auto;
height:auto;
}
.sidebarwrap ul{
float:left;
display:block;
background:white;
padding:10px;
margin-right:30px;
margin-left:10px;
list-style-type:none;
border:1px dotted #0099CC;
border-radius:100px/10px;
}
.sidebarwrap ul ul{
list-style-type:none;
display:none;
border:0px dotted #0099CC;
border-radius:20px/60px;
}
.sidebarwrap li li{
list-style-type:circle;
border:0px dotted #0099CC;
border-radius:20px/60px;
padding:5px;
}
JavaScript 的JavaScript
var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head') [0].appendChild(cssNode);
function toggle(toggler) {
if(document.getElementById){
targetElement = toggler.nextSibling;
if(targetElement.className == undefined){
targetElement = toggler.nextSibling.nextSibling;
}
if (targetElement.style.display == "block")
{
targetElement.style.display = "none";
}
else
{
targetElement.style.display = "block";
timer();
}
}
}
function timer(){
var Time = setTimeout(function(){toggle(toggler)},1000);
}
You can do this using the .hover() method in jQuery. 您可以使用jQuery中的.hover()方法执行此操作。 Just bind to the link when the page loads. 只需在页面加载时绑定到链接。
$(document).ready(function () {
$("a").hover(function () {
$(this).next().slideDown();
},
function () {
$(this).next().delay(1000).slideUp();
});
});
See working example: http://jsfiddle.net/WFN6q/ 参见工作示例: http : //jsfiddle.net/WFN6q/
Here is a working example in Vanilla JS: 这是Vanilla JS中的一个工作示例:
<ul>
<li>
<a href="#" onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Section One </a>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
</ul>
Corresponding JS: 对应的JS:
function showMenu(myLink) {
myLink.nextElementSibling.style.display = 'block';
}
function hideMenu(myLink) {
var ulElem = myLink.nextElementSibling;
if (ulElement.style.display === 'block') {
setTimeout(function () { myLink.nextElementSibling.style.display = 'none' }, 1000);
}
}
I noticed that in your code, you have onmouseout set to call timer(), which will create an extraneous timeout function that does not have toggler
defined. 我注意到,在你的代码,你的onmouseout设置为来电计时器(),这将创建一个没有外来超时功能toggler
定义。 Further, your code will recourse indefinitely, ~every 1000ms. 此外,您的代码将无限期地(每1000毫秒)求助。
You should define a global Timers variable to hold your timer references. 您应该定义一个全局Timers变量来保存您的计时器引用。 That way this function can exit and you can cancel or otherwise manipulate the timer. 这样,该功能可以退出,您可以取消或以其他方式操作计时器。 As well, you can implement a Singleton model here and prevent you from having many many timers. 同样,您可以在此处实现Singleton模型,并避免使用很多计时器。
var Timers = {}; // create a Timers object to hold our timers.
function timer(target){
Timers.sectionOne = setTimeout(function(){ toggle(target); }, 1000);
}
EDIT: I'd take this in addition to the method @Bic described, which is nicely elegant. 编辑:除了方法@Bic所描述的之外,我还会考虑这一点,这非常好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.