最簡單的 jquery 樹狀表單範例

• 第1章 Javascript簡介
• 第2章 Javascript基礎
• 第3章 CSS基礎
  • 第3.1節 CSS的概念
  • 第3.2節 使用CSS控制頁面
    • 3.2.1 行內樣式
    • 3.2.2 內嵌式
  • 第3.3節 CSS選擇器
• 第4章 CSS進階
  • 第4.1節 div標記與span標記
  • 第4.2節 盒子模型
  • 第4.3節 元素的定位
    • 4.3.1 float定位
    • 4.3.2 position定位
    • 4.3.3 z-index空間位置

js code

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript">
$(function(){
 $("li:has(ul)").click(function(e){
  if(this==e.target){
   if($(this).children().is(":hidden")){
    //如果子項是隱藏的則顯示
    $(this).css("list-style-image","url(http://www.matrox.com/graphics/media/image/style/list_minus.gif)")
    .children().show();
   }else{
    //如果子項是顯示的則隱藏
    $(this).css("list-style-image","url(http://www.matrox.com/graphics/media/image/style/list_plus.gif)")
    .children().hide();
   }
  }
  return false; //避免不必要的事件混繞
 }).css("cursor","pointer").click(); //加載時觸發點擊事件
 
 //對於沒有子項的選單，統一設置
 $("li:not(:has(ul))").css({
  "cursor":"default",
  "list-style-image":"none"
 });
});
</script>

html code

<br />
<ul>
<li>第1章 Javascript簡介</li>
<li>第2章 Javascript基礎</li>
<li>第3章 CSS基礎
  <ul>
<li>第3.1節 CSS的概念</li>
<li>第3.2節 使用CSS控制頁面
    <ul>
<li>3.2.1 行內樣式</li>
<li>3.2.2 內嵌式</li>
</ul>
</li>
<li>第3.3節 CSS選擇器</li>
</ul>
</li>
<li>第4章 CSS進階
  <ul>
<li>第4.1節 div標記與span標記</li>
<li>第4.2節 盒子模型</li>
<li>第4.3節 元素的定位
    <ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空間位置</li>
</ul>
</li>
</ul>
</li>
</ul>