看了一半，就沒(méi)看下去了，感覺(jué)老師的方法有點(diǎn)兒拖沓，自己寫了個(gè)，但是最后一個(gè)函數(shù)沒(méi)反應(yīng)？？？
<!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");
?? ??? ??? ?// 點(diǎn)擊顯示菜單
?? ??? ??? ?ul.onclick = function(ev){
?? ??? ??? ??? ??? ?var oEvent = ev||event;??????? //兼容火狐 和 IE、谷歌！
?? ??? ??? ??? ??? ?oEvent.cancelBubble = true;??? // 取消冒泡事件。
?? ??? ??? ??? ??? ?ul.style.overflow = "visible";
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?for(var i=0;i<li.length;i++){
?? ??? ??? ?//? 點(diǎn)擊空白處 隱藏菜單?? ?
?? ??? ??? ??? ?document.onclick = function(){
??? ??? ??? ??? ??? ?ul.style.overflow = "hidden";
?? ??? ??? ??? ?}
?? ??? ??? ?//? 鼠標(biāo)移入改變背景色?? ?
?? ??? ??? ??? ?li[i].onmouseover = function(){
?? ??? ??? ??? ??? ?this.style.background = "#00c";
?? ??? ??? ??? ?}
?? ??? ??? ?//? 鼠標(biāo)移出還原背景色?? ?
?? ??? ??? ??? ?li[i].onmouseout = function(){
?? ??? ??? ??? ??? ?this.style.background = "#c00";
?? ??? ??? ??? ?}
?? ??? ??? ?//? 當(dāng)菜單全部顯示時(shí)
?? ??? ??? ???? 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>請(qǐng)勿打擾</li>
?? ??? ??? ?<li>忙碌</li>
?? ??? ??? ?<li>離開</li>
?? ??? ?</ul>
?? ?</div>
</body>
</html>
樣式是隨便寫的哈，，，，，
我就想問(wèn)下?? 當(dāng)菜單全部顯示時(shí)，執(zhí)行的函數(shù)為什么沒(méi)有效果，網(wǎng)頁(yè)也沒(méi)有報(bào)錯(cuò)啊，求教求教?。?！
2016-01-03
你再試試我改的這個(gè)，增加了個(gè)for循環(huán)，如果有不懂的可以繼續(xù)問(wèn)我，加油！?。?br />
<!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");
??????????? // 點(diǎn)擊顯示菜單
??????????? 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++){
??????????? //? 點(diǎn)擊空白處 隱藏菜單?? ?
??????????? //? 鼠標(biāo)移入改變背景色?? ?
??????????????? li[i].onmouseover = function(){
??????????????????? this.style.background = "#00c";
??????????????? }
??????????? //? 鼠標(biāo)移出還原背景色?? ?
??????????????? li[i].onmouseout = function(){
??????????????????? this.style.background = "#c00";
??????????????? }
?????????????? ?
??????????? //? 當(dāng)菜單全部顯示時(shí)
??????????????? 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>請(qǐng)勿打擾</li>
??????????? <li>忙碌</li>
??????????? <li>離開</li>
??????? </ul>
??? </div>
</body>
</html>
2016-01-03
<!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");
??????????? // 點(diǎn)擊顯示菜單
??????????? 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++){
??????????? //? 點(diǎn)擊空白處 隱藏菜單?? ?
??????????? //? 鼠標(biāo)移入改變背景色?? ?
??????????????? li[i].onmouseover = function(){
??????????????????? this.style.background = "#00c";
??????????????? }
??????????? //? 鼠標(biāo)移出還原背景色?? ?
??????????????? li[i].onmouseout = function(){
??????????????????? this.style.background = "#c00";
??????????????? }
?????????????? ?
??????????? //? 當(dāng)菜單全部顯示時(shí)
??????????????? 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";
??????????????????????? }
??????????????? }? ?
??????????? }
??????????? //? 改善了下，點(diǎn)擊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>請(qǐng)勿打擾</li>
??????????? <li>忙碌</li>
??????????? <li>離開</li>
??????? </ul>
??? </div>
</body>
</html>