欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery樹(shù)形下拉菜單特效代碼分享

 更新時(shí)間：2015年08月15日 15:38:31   投稿：lijiao  
這篇文章主要介紹了jQuery實(shí)現(xiàn)幻樹(shù)形下拉菜單特效，代碼簡(jiǎn)單，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)幻樹(shù)形下拉菜單特效，實(shí)現(xiàn)自動(dòng)伸縮，分享給大家供大家參考。

運(yùn)行jQuery樹(shù)形下拉菜單特效效果圖：

為大家分享的jQuery樹(shù)形下拉菜單代碼如下


<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">
 資源庫(kù)
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">歡迎訪問(wèn)</a></li>
  <li><a href="http://www.dbjr.com.cn/"> 腳本之家 </a></li>
  <li><a href="http://www.dbjr.com.cn/list/index_1.htm"> 網(wǎng)絡(luò)編程</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 文章模塊
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">前端技術(shù)</a></li>
  <li> <a href="http://www.dbjr.com.cn/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="http://www.dbjr.com.cn/list/index_104.htm">數(shù)據(jù)庫(kù)</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下載模塊
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="http://www.dbjr.com.cn/">腳本之家 </a></li>
  <li> <a href="http://www.dbjr.com.cn/codes/">源碼下載</a></li>
  <li> <a href="http://www.dbjr.com.cn/books/">電子書(shū)籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

以上就是為大家分享的jQuery樹(shù)形下拉菜單代碼，希望大家可以喜歡。

相關(guān)文章

  • 基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)

    基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)

    一款非常乖巧的人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)效果，在瀏覽器屏幕內(nèi)，人物臉龐始終面向鼠標(biāo)轉(zhuǎn)動(dòng)，本篇文章給大家介紹基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)，有需要的朋友可以參考下
    2015-08-08
  • jQuery插件開(kāi)發(fā)基礎(chǔ)簡(jiǎn)單介紹

    jQuery插件開(kāi)發(fā)基礎(chǔ)簡(jiǎn)單介紹

    jquery插件開(kāi)發(fā)基礎(chǔ)：開(kāi)發(fā)jQuery 插件的基本格式,開(kāi)發(fā)全局函數(shù)的基本格式，接下來(lái)為您詳細(xì)介紹，感興趣的朋友可以了解哦
    2013-01-01
  • jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)

    jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)

    下面小編就為大家?guī)?lái)一篇jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-11-11
  • 基于jquery的地址欄射擊游戲代碼

    基于jquery的地址欄射擊游戲代碼

    地址欄射擊游戲!對(duì)，你沒(méi)看錯(cuò)，就是在地址欄上玩的游戲，有圖有真相！之前在網(wǎng)上看到這個(gè)小游戲，可惜在墻外，中午研究了一下，搬到國(guó)內(nèi)來(lái)了，看看吧！
    2011-03-03
  • jQuery的Cookie封裝,與PHP交互的簡(jiǎn)單實(shí)現(xiàn)

    jQuery的Cookie封裝,與PHP交互的簡(jiǎn)單實(shí)現(xiàn)

    下面小編就為大家?guī)?lái)一篇jQuery的Cookie封裝,與PHP交互的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-10-10
  • Jquery日期選擇datepicker插件用法實(shí)例分析

    Jquery日期選擇datepicker插件用法實(shí)例分析

    這篇文章主要介紹了Jquery日期選擇datepicker插件用法,實(shí)例分析了datepicker插件的相關(guān)使用技巧,需要的朋友可以參考下
    2015-06-06
  • jquery三大不同版本之間區(qū)別專家講解

    jquery三大不同版本之間區(qū)別專家講解

    jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架,目前jQuery有1.x、2.x、3.x三個(gè)版本,在jQuery官網(wǎng)（http://jquery.com/）可以查看,2.x、3.x不是?1.x?的后續(xù)或者升級(jí)版本,他們是同時(shí)更新迭代的,現(xiàn)在使用最廣的版本都是1.x的
    2023-09-09
  • 基于jQuery的圖片剪切插件

    基于jQuery的圖片剪切插件

    網(wǎng)頁(yè)應(yīng)用程序需要對(duì)豐富的內(nèi)容提供簡(jiǎn)單易用的上傳和操作方式，但是這樣會(huì)給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個(gè)詳細(xì)的教程將包括在jQuery庫(kù)上創(chuàng)建此參加的每一個(gè)步驟。
    2011-08-08
  • jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例

    jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法,涉及jQuery事件綁定及頁(yè)面元素屬性動(dòng)態(tài)獲取與操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2017-10-10
  • JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別

    JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別

    這篇文章主要介紹了JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別講解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
    2016-12-12

最新評(píng)論