                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

看了一半，就沒看下去了，感覺老師的方法有點兒拖沓，自己寫了個，但是最后一個函數沒反應？？？

<!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>

樣式是隨便寫的哈，，，，，

我就想問下?? 當菜單全部顯示時，執行的函數為什么沒有效果，網頁也沒有報錯啊，求教求教?。。?br />

慕碼人0911192

2015-12-25

源自：DOM事件探秘 4-3

關注問題我要回答

1389

操作

收起

2 回答

qq_一一不服來戰回答被采納 +3 積分
2016-01-03

你再試試我改的這個，增加了個for循環，如果有不懂的可以繼續問我，加油！?。?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");
??????????? // 點擊顯示菜單
??????????? 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>

0 回復有任何疑惑可以回復我~

收起回答

慕碼人0911192 提問者

我又改善了下，代碼在下面！一起加油。。。

2016-01-03 回復有任何疑惑可以回復我~

qq_一一不服來戰回復慕碼人0911192 提問者

一起加油^_^

2016-01-04 回復有任何疑惑可以回復我~

慕碼人0911192 提問者
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");
??????????? // 點擊顯示菜單
??????????? 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>

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

DOM事件探秘

參與學習 99534 人
解答問題 1305 個

DOM事件？本課程會通過實例來給小伙伴們講解如何使用這些事件

進入課程

本課相似問答

1 回答看完這一節，自己寫了一個DOM二級事件函數，但老是報錯：obj is null ！

2 回答這個就是按照老師寫的一模一樣寫了一遍，怎么點開始沒反應呢？

3 回答為啥第二個按鈕沒有作用了，看了半天沒看出問題

1 回答雖然寫出來了但是有個bug看在坐有沒有大神能幫忙解決一下

2 回答為什么都一點效果都沒有啊，我看了同學出錯的地方改，就加了一個花括號

搜索更多本課相關問答

看了一半，就沒看下去了，感覺老師的方法有點兒拖沓，自己寫了個，但是最后一個函數沒反應？？？

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

看了一半，就沒看下去了，感覺老師的方法有點兒拖沓，自己寫了個，但是最后一個函數沒反應？？？

2 回答

本課相似問答

看了一半，就沒看下去了，感覺老師的方法有點兒拖沓，自己寫了個，但是最后一個函數沒反應？？？

看了一半，就沒看下去了，感覺老師的方法有點兒拖沓，自己寫了個，但是最后一個函數沒反應？？？

看了一半，就沒看下去了，感覺老師的方法有點兒拖沓，自己寫了個，但是最后一個函數沒反應？？？