1

我在一个站点上有这个文件夹树，我尝试仅通过 CSS 进行交互（打开和关闭文件夹等）。

我这样做的方式在 Firefox 中完美运行，但在任何基于 webkit 的浏览器（Chrome、Safari）中都不起作用。当我尝试调试它时，它正确地更改了调试器中的显示属性，但是为了看到预期的效果，我不得不关闭显示属性，然后再次打开。

CSS：

ul.tree
{
   text-align: left;
}

ul.tree li
{
   position: relative;  
   list-style: none;
}

li.file
{
   background: url(images/icons/default_document.png) 0 0 no-repeat;
   background-size: 1.5em 1.5em;
}

li.file a
{
   display: block;
   text-decoration: none;
}

ul.tree li input
{   
   position: absolute;
   top: 0;
   left: 0;

   cursor: pointer; 

   opacity: 0;
   z-index: 2;
}

ul.tree li input + label + ul
{   
   margin: 1em 0 1em 2em;
}

ul.tree li input + label + ul > li
{
   display: none;
}

ul.tree li label
{   
   background: url(images/icons/Closed_32x32x32.png) 0 0 no-repeat;
   background-size: 1.3em 1.3em; 

   cursor: pointer;

   display: block;
}

ul.tree li input:checked + label
{
   background-image: url(images/icons/Open_32x32x32.png);
}

ul.tree li input:checked + label + ul
{
   margin: 0 0 0 3em;
}

ul.tree li input[type=checkbox]:checked + label + ul > li.file
{
   display: list-item;

   margin: 0;
}

HTML：

<ul class="tree">
   <li>
      <input type="checkbox" id="subfolder1" /><label for="subfolder1">Some Label</label>
      <ul>
         <li class="file"><a href="path/to/file1">file1</a></li>
         <li class="file"><a href="path/to/file2">file2</a></li>
      </ul>
   </li>
</ul>

如果您需要查看完整的站点（我省略了不重要的 CSS 属性等），可以在http://perpartes.cz/novy_PPC/publikace找到它……只需在表单中写一些假电子邮件即可。

4

0 回答 0