jQuery tree drop-down menu kesan khas kod sharing

jQuery tree drop-down menu kesan khas kod sharing_jquery

WBOY

Lepaskan： 2016-05-16 15:44:57

asal

1139 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan kesan menu lungsur turun pokok ajaib dan merealisasikan penskalaan automatik saya ingin berkongsi dengan anda untuk rujukan anda.

Jalankan pemaparan kesan khas menu lungsur pokok jQuery:

Kod menu lungsur turun pokok jQuery yang dikongsi dengan anda adalah seperti berikut

<head>

<title>常用的jquery下拉菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(
 function() 
 {
 $(".menuTitle").click(function(){
  $(this).next("div").slideToggle("slow")
  .siblings(".menuContent:visible").slideUp("slow");
  $(this).toggleClass("activeTitle");
  $(this).siblings(".activeTitle").removeClass("activeTitle");
 });
 });
 
</script>
<style type="text/css">
 body
 {
 margin:0;background-color:#9ad075;
 }
 .container
 {
 width:100%; text-align:center;
 }
 .menuTitle
 {
 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .activeTitle
 {
 width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .menuContent
 {
 background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;
 }
 li
 {
  background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;
 }
 ul
 {
 margin:0;padding:0;
 }
</style>
</head>
<body>
<div class="container">
 <div class="menuTitle">
 资源库
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">欢迎访问</a></li>
  <li><a href="http://www.jb51.net/"> 脚本之家 </a></li>
  <li><a href="http://www.jb51.net/list/index_1.htm"> 网络编程</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 文章模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">前端技术</a></li>
  <li> <a href="http://www.jb51.net/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="http://www.jb51.net/list/index_104.htm">数据库</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下载模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="http://www.jb51.net/">脚本之家 </a></li>
  <li> <a href="http://www.jb51.net/codes/">源码下载</a></li>
  <li> <a href="http://www.jb51.net/books/">电子书籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

Salin selepas log masuk

Di atas ialah kod menu lungsur jQuery tree yang dikongsi dengan anda, saya harap anda menyukainya.