Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert ein einfaches sekundäres Dropdown-Menü_jquery

jQuery implementiert ein einfaches sekundäres Dropdown-Menü_jquery

WBOY
WBOYOriginal
2016-05-16 16:04:501134Durchsuche

HTML-Code

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

JS-Code

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

CSS-Code

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;} 

Vergessen Sie am besten nicht, die jQuery-JS-Datei einzufügen, am besten laden Sie die neueste herunter.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn