jQuery學習之設計樹形菜單

時間 2021-02-02

標籤 javascript css 前端 java jquery ide 函數動畫網站 this 欄目 JQuery 简体版

原文原文鏈接

TreeView即樹形視圖。TreeView通常被佈置在頁面的側邊欄位置，並可摺疊收縮。javascript

如下用兩個示例來展現TreeView形式的網站導航功能。css

1、普通TreeView前端

原理：經過設定上層節點中特定元素的鼠標單擊觸發事件，對下層子節點進行顯示樣式更改。java

實現步驟：jquery

1.獲取須要響應鼠標單擊事件的上層節點元素對象。ide

2.對鼠標單擊事件進行加工，修改子節點樣式。函數

$(document).ready(this

function(){

$(".pe_u_thumb_list").children("img").toggle(

/*對父節點中的圖片元素設定觸發事件*/

function(){ /*鼠標單擊圖片奇數次時隱藏下層節點*/

$(this).parent().next("ul").hide();

function(){/*鼠標單擊圖片偶數次時展開下層節點*/

$(this).parent().next("ul").show();

}

);

}

);

</script>

ul { list-style:none; }

</style>

</head>

<body>

<ul>

<ul>

<li>統一設定標記元素樣式</li>

</ul>

<li class="pe_u_thumb_list"><img src="p_w_picpaths/listicon.jpg"/><a href="#">Javascript</a></li>

<ul>

<li>網頁前端腳本語言</li>

<li>對事件響應實現網頁動態效果</li>

</ul>

</body>

效果以下所示：

2、加入淡入淡出效果的TreeView

實現步驟：

1.取得要顯示的節點對象，並在其上定義單擊事件

2.在單擊事件中取得後續標記元素對象總體，並在其上加入切換顯示狀態動畫。

代碼中用到的部分函數或方法：

1.jQuery遍歷——nextAll()方法，該方法得到匹配元素集合中每一個元素的全部跟隨的同胞元素，

語法：.nextAll(selector)

2.jQuery效果——toggle()方法，該方法切換元素的可見狀態，若是被選元素可見，則隱藏這些元素，若是被選元素隱藏，則顯示這些元素。

語法：$(selector).toggle(speed,callback,switch)

代碼以下：

$(document).ready(

function(){

var main = $("ul > a");

main.click(function(){

var sub = $(this);

var item = sub.nextAll("li");/*取得表明TreeView全部子節點的元素對象*/

item.toggle("slow");/*修改子節點顯示狀態*/

});

}

);

</script>

<style>

ul { list-style:none;}

</style>

</head>

<body>

<ul><a href="#"><strong>西安郵電大學</strong></a>

<li><img src="p_w_picpaths/listicon.jpg" /><a href="http://www.xupt.edu.cn">計算機學院</a></li>

<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">通訊與信息工程學院</a></li>

<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">電子工程學院</a></li>

</ul>

<ul><a href="#"><strong>陝西師範大學</strong></a>

<li><img src="p_w_picpaths/listicon.jpg" /><a href="http://www.snnu.edu.cn">計算機科學學院</a></li>

<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">歷史文化學院</a></li>

<li><img src="p_w_picpaths/listicon.jpg" /><a href="#">外國語學院</a></li>

</ul>

</body>

效果以下：

點擊「西安郵電大學」幾個字，下面的學院信息被隱藏：

1. jquery樹形菜單
2. 樹形菜單的存儲設計
3. 樹形菜單
4. Jquery Easy-UI 樹形菜單的運用
5. jquery樹形菜單完整代碼
6. jquery多級樹形下拉菜單
7. jquery樹形菜單(無階數限制)
8. vue樹形菜單
9. Vue樹形菜單
10. bootstrap樹形菜單
更多相關文章...
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• Eclipse 菜單 - Eclipse 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。