Question

我正在使用http://www.thecssninja.com/css/css-tree-menu上的Pure CSS可折叠树导航。我想在导航中添加一些简单的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');
});

使用JQuery动画的纯CSS可折叠树导航

1 个答案: