我试图将菜单从悬停更改为单击,但如果我单击菜单,子菜单也会很快关闭,我想我需要一个用于onclick和toggle的javascript,但不知道如何完成。请帮帮我,我是新手
/* menu */
#menu{ margin:0px 0px; margin-top:67px; margin-left:90px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; height:-100px; width:1000px; }
#menu1{ margin:0px 0px; margin-top:auto; margin-left:-50px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; height:auto; width:95px; }
#menu a { color:#000; text-decoration:none; }
#menu > li {background:#fff none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px; z-index:999 !important;}
#menu > li a:hover {color:#B0D730;}
#menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block; display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px; margin-top:30px; width:200px; line-height:16px; background-color:#FFF; color:#FFF; /* for IE */ display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#0395CC; }
#menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px; background-color:#FFF; color:#fff; z-index:999 !important;}
点击
在HTML代码中,您可以在点击时执行Javascript操作:
<p onclick="clickedText()">Click Me!</p>
必要的Javascript代码是:
var clickedText = function() {
//Insert Code Here That's On Click
}
要通过id访问元素,请使用以下Javascript代码:
var element = document.getElementById("id");
然后你可以使用:
element.style.display = "none";
速度
如果某个东西关闭得太快,而您正在使用display: none;
,那是因为您告诉浏览器在这一秒内不显示任何内容。
您的CSS代码是告诉浏览器不要显示子菜单。
CSS代码
这就是HTML文件示例的用武之地。您告诉浏览器以下内容:
#menu li:hover ul { /*Do stuff*/ }
这意味着它选择中的所有ul
,a悬停在#menu
中的li
上。
我认为CSS Selector Reference会对你有很大帮助。
建议
- 我建议您提供一段HTML代码
- 我建议你试试这个,这个和这个教程
- 我建议您看一下
:not()
CSS选择器