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

為了賬號安全,請及時綁定郵箱和手機立即綁定

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


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

正在回答

2 回答

你再試試我改的這個,增加了個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 回復 有任何疑惑可以回復我~
#1

慕碼人0911192 提問者

我又改善了下,代碼在下面! 一起加油。。。
2016-01-03 回復 有任何疑惑可以回復我~
#2

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

一起加油^_^
2016-01-04 回復 有任何疑惑可以回復我~

<!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
提交
取消

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

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號