Rumah > hujung hadapan web > tutorial js > jQuery melaksanakan menu lungsur ke bawah sekunder yang mudah_jquery

jQuery melaksanakan menu lungsur ke bawah sekunder yang mudah_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 16:04:50
asal
1201 orang telah melayarinya

kod html

<div class="UpLayer">
<dl>
<dt>
<a href="javascript:void(0)">脚本之家</a></dt>
<dd>
<a href="http://www.demo.com/js/">特效</a> <a href="http://www.demo.com/Tutorials/">教程</a> <a href="http://www.demo.com/zy/">资源</a> <a href="http://www.demo.com/mb/">模板</a> <a href="http://www.demo.com/news/">资讯</a></dd>
</dl>
</div>
Salin selepas log masuk

kod js

<script type="text/javascript"> 
// 【经典】弹出层菜单 
$(document).ready(function(){ 
  var objStr = ".UpLayer"; 
  $(objStr).each(function(i){ 
    $(this).click(function(){ 
      $($(objStr+" dd")[i]).show(); 
      $($(objStr+" dt")[i]).addClass("UpLayer02"); 
    }); 
    $(this).hover(function(){},function(){ 
      $($(objStr+" dd")[i]).hide(); 
      $($(objStr+" dt")[i]).removeClass("UpLayer02"); 
    });  
  }); 
}); 
</script> 
Salin selepas log masuk

kod css

body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;} 
li{list-style:none;} 
img{border:none;} 
u{text-decoration:none;} 
em{font-style:normal;} 
a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());} 
body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;} 
.box{margin:0 auto;text-align:left;width:920px;} 
.clear{clear:both;} 
/* 【经典】弹出层菜单 */ 
.UpLayer{ margin:100px;} 
.UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} 
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} 
.UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} 
.UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;} 
Salin selepas log masuk

Sebaik-baiknya jangan lupa untuk memasukkan fail jQuery js, yang terbaik adalah memuat turun yang terkini.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan