使用jQuery動畫純CSS可摺疊樹導航

Question

我使用純CSS可摺疊樹導航功能：http://www.thecssninja.com/css/css-tree-menu。我想嚮導航添加一些簡單的jquery，以便在摺疊打開/關閉時給它一個平滑的過渡，但不知道如何。我的代碼如下：

<ul class="tree"> 
    <li> 
     <label for="folder1" class="menu_first">Treatment Options</label> <input type="checkbox" id="folder1" /> 
     <ul> 
      <li class="file"><a href="">- File 1</a></li> 
      <li class="file"><a href="">- File 1</a></li> 
      <li class="file"><a href="">- File 1</a></li> 
      <li class="file"><a href="">- File 1</a></li> 
     </ul> 
    </li> 
    <li> 
     <label for="folder2" class="menu_first">Benefits &amp; Risks</label> <input type="checkbox" id="folder2" /> 
     <ul> 
      <li class="file"><a href="">- Benefits</a></li> 
      <li class="file"><a href="">- Life &amp; Death</a></li> 
      <li class="file"><a href="">- Complications</a></li> 
      <li class="file"><a href="">- Psychological Risks</a></li> 
      <li class="file"><a href="">- Lifestyle Changes</a></li> 
     </ul> 
    </li> 
    <li> 
     <label for="folder3" class="menu_first">Donation: Step-by-Step</label> <input type="checkbox" id="folder3" /> 
     <ul> 
      <li class="file"><a href="">- File 1</a></li> 
      <li class="file"><a href="">- File 1</a></li> 
      <li class="file"><a href="">- File 1</a></li> 
      <li class="file"><a href="">- File 1</a></li> 
     </ul> 
    </li></li></ul> 



ul.tree{ 
     padding:10px 5px 0 20px; 
     width: 230px; 
     background-color:#eaeaea; 
     margin-top:0px; 
     font-family:"FutConM",Arial,Helvetica,sans-serif; 
     font-size:28px; 
} 
li{ 
position: relative; 
margin-left: -15px; 
list-style: none; 
color:#666; 
} 
li.file{ 
margin-left: -1px !important; 
} 
li.file a{ 
background:; 
color:#666; 
text-decoration: none; 
display: block; 
margin-left:-63px; 
line-height:25px; 
} 
li.file a[href *= '.pdf']{ 
background: url(document.png) 0 0 no-repeat; 
} 
li.file a[href *= '.html']{ 
background: url(document.png) 0 0 no-repeat; 
} 
li.file a[href $= '.css']{ 
background: url(document.png) 0 0 no-repeat; 
} 
li.file a[href $= '.js']{ 
background: url(document.png) 0 0 no-repeat; 
} 
li input{ 
position: absolute; 
left: 0; 
margin-left: 0; 
opacity: 0; 
z-index: 2; 
cursor: pointer; 
height: 1em; 
width: 1em; 
top: 0; 
} 
li input + ul{ 
background: url("/images/navtree/toggle-small-expand.png") no-repeat scroll 0 0; 
height: 17px; 
margin-left: -2px; 
margin-top: -17px; 
} 
li input + ul > li{ 
display: none; 
margin-left: -14px !important; 
padding-left: 1px; 
} 
li label{ 
background:; 
cursor: pointer; 
display: block; 
padding-left: 15px; 
border-top:1px solid #999; 
} 
li label.menu_first:hover{ 
background-color:#F63; 
} 
li label.menu_first:active{ 
background-color:#F63; 
} 
li label.menu_first:visited{ 
background-color:#F63; 
} 
li input:checked + ul{ 
background: url("/images/navtree/toggle-small.png") 0px 0px no-repeat; 
margin-left: -2px; 
margin-top: -17px; /* 20px */ 
padding: 1.563em 0 0 80px; 
height: auto; 
} 
li input:checked + ul > li{ 
display: block; 
margin: 0 0 0.125em; /* 2px */ 
} 
li input:checked + ul > li:last-child{ 
margin: 0 0 0.063em; /* 1px */ 
} 

Answer 1

如果你想保持非JS的工作，你需要切換的元素，然後在它們的動畫/輸出：

$("li input").on('change', function() { 
    $("+ ul > li", this).toggle().toggle('slow'); 
});