看了一半，就没看下去了，感觉老师的方法有点儿拖沓，自己写了个，但是最后一个函数没反应？？？
慕码人0911192
2015-12-25 17:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background: #ccc;
position: relative;
}
ul{
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 80px;
height: 24px;
position: absolute;
right: 80px;
bottom: 30px;
overflow: hidden;
}
li{
line-height: 24px;
text-indent:8px;
background: #c00;
color: #fff;
}
</style>
<script>
window.onload =function(){
var ul =document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName("li");
// 点击显示菜单
ul.onclick = function(ev){
var oEvent = ev||event; //兼容火狐 和 IE、谷歌！
oEvent.cancelBubble = true; // 取消冒泡事件。
ul.style.overflow = "visible";
}
for(var i=0;i<li.length;i++){
// 点击空白处 隐藏菜单
document.onclick = function(){
ul.style.overflow = "hidden";
}
// 鼠标移入改变背景色
li[i].onmouseover = function(){
this.style.background = "#00c";
}
// 鼠标移出还原背景色
li[i].onmouseout = function(){
this.style.background = "#c00";
}
// 当菜单全部显示时
if (ul.style.overflow == "visible") {
li[i].onclick = function(ev){
for (var j = 0; j < li.length; j++) {
li[j].style.display = "none";
}
var oEvent = ev||event; //兼容火狐 和 IE、谷歌！
oEvent.cancelBubble = true; // 取消冒泡事件。
this.style.display = "block";
ul.style.overflow = "hidden";
}
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li>在线</li>
<li>Q我吧</li>
<li>请勿打扰</li>
<li>忙碌</li>
<li>离开</li>
</ul>
</div>
</body>
</html>
样式是随便写的哈，，，，，
我就想问下 当菜单全部显示时，执行的函数为什么没有效果，网页也没有报错啊，求教求教！！！
2回答
-
- qq_一一不服来战
- 2016-01-03 14:07:04
你再试试我改的这个，增加了个for循环，如果有不懂的可以继续问我，加油！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background: #ccc;
position: relative;
}
ul{
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 80px;
height: 24px;
position: absolute;
right: 80px;
bottom: 30px;
overflow: hidden;
}
li{
line-height: 24px;
text-indent:8px;
background: #c00;
color: #fff;
}
</style>
<script>
window.onload =function(){
var ul =document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName("li");
// 点击显示菜单
var k=0
li[0].onclick = function(ev){
var oEvent = ev||event; //兼容火狐 和 IE、谷歌！
oEvent.cancelBubble = true; // 取消冒泡事件。
if(k==0){
ul.style.overflow = "visible";
k=1;
}
else{ul.style.overflow="hidden";k=0;}
}
for(var i=0;i<li.length;i++){
// 点击空白处 隐藏菜单
// 鼠标移入改变背景色
li[i].onmouseover = function(){
this.style.background = "#00c";
}
// 鼠标移出还原背景色
li[i].onmouseout = function(){
this.style.background = "#c00";
}
// 当菜单全部显示时
if (ul.style.overflow == "visible") {
li[i].onclick = function(ev){
for (var j = 0; j < li.length; j++) {
li[j].style.display = "none";
}
var oEvent = ev||event; //兼容火狐 和 IE、谷歌！
oEvent.cancelBubble = true; // 取消冒泡事件。
this.style.display = "block";
ul.style.overflow = "hidden";
}
}
}
for(var i=1;i<li.length;i++){
li[i].onclick=function(){
ul.style.overflow="hidden";
k=0;
li[0].innerHTML=this.innerHTML;
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li>在线</li>
<li>在线</li>
<li>Q我吧</li>
<li>请勿打扰</li>
<li>忙碌</li>
<li>离开</li>
</ul>
</div>
</body>
</html> -
- 慕码人0911192
- 2016-01-03 21:29:15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background: #ccc;
position: relative;
}
ul{
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 80px;
height: 24px;
position: absolute;
right: 80px;
bottom: 30px;
overflow: hidden;
cursor: pointer;
}
li{
line-height: 24px;
text-indent:8px;
background: #c00;
color: #fff;
}
</style>
<script>
window.onload =function(){
var ul =document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName("li");
// 点击显示菜单
var k=0
li[0].onclick = function(ev){
var oEvent = ev||event; //兼容火狐 和 IE、谷歌！
oEvent.cancelBubble = true; // 取消冒泡事件。
if(k==0){
ul.style.overflow = "visible";
k=1;
}
else{ul.style.overflow="hidden";k=0;}
}
for(var i=0;i<li.length;i++){
// 点击空白处 隐藏菜单
// 鼠标移入改变背景色
li[i].onmouseover = function(){
this.style.background = "#00c";
}
// 鼠标移出还原背景色
li[i].onmouseout = function(){
this.style.background = "#c00";
}
// 当菜单全部显示时
if (ul.style.overflow == "visible") {
li[i].onclick = function(ev){
for (var j = 0; j < li.length; j++) {
li[j].style.display = "none";
}
var oEvent = ev||event; //兼容火狐 和 IE、谷歌！
oEvent.cancelBubble = true; // 取消冒泡事件。
this.style.display = "block";
ul.style.overflow = "hidden";
}
}
}
// 改善了下，点击dom， 菜单收回
for(var i=1;i<li.length;i++){
document.onclick = function(){
ul.style.overflow="hidden";
}
li[i].onclick=function(){
k=0;
li[0].innerHTML=this.innerHTML;
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li>在线</li>
<li>在线</li>
<li>Q我吧</li>
<li>请勿打扰</li>
<li>忙碌</li>
<li>离开</li>
</ul>
</div>
</body>
</html>
DOM事件探秘
99544 学习 · 1197 问题
相似问题