覆盖 css 以创建树视图

Question

我尝试为 redmine 项目列表页面创建一个可折叠的树视图。我尝试了该插件，但它不起作用。所以我的替代方案是使用 css 插件覆盖 ul、li 显示，如 this。检查下面的 html 和我创建的自定义 css，它们不起作用。不知道怎么回事

.projects li > input + * {
 display: none;
}
 
.projects li > input:checked + * {
 display: block;
}

.projects li > input {
 display: none;
}

.projects label {
 cursor: pointer;
}

    <h2>Projects</h2>

<div id="projects-index">
 <ul class='projects root'>
  <li class='root'><div class='root'><a class="project root parent " href="/redmine/projects/abc">Company projects</a></div>
   <ul class='projects '>
    <li class='child'><div class='child'><a class="project child parent " href="/redmine/projects/abc">A-1.abc</a></div>
     <ul class='projects '>
      <li class='child'>
       <div class='child'><a class="project child parent " href="/redmine/projects/a-research">A. research</a></div>
       <ul class='projects '>
        <li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/test-rds">1. rds</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/test-bgx">test-bgx</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/3d">3. 3d</a></div>
        </li>
       </ul>
      </li>
      <li class='child'>
       <div class='child'><a class="project child parent " href="/redmine/projects/b-shop">B. shop</a></div>
       <ul class='projects '>
        <li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/du">1. DU</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf my-project" href="/redmine/projects/d2m">D2m</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/m2s">3. m2s</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/korean">4. korean</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/2msms">6. C2msms</a></div>
        </li>
       </ul>
      </li>
      <li class='child'>
       <div class='child'><a class="project child parent " href="/redmine/projects/c-others">C. Others</a></div>
       <ul class='projects '>
        <li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/summary">1. summary</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/group">2. group</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/yearly">3. yearly</a></div>
        </li><li class='child'><div class='child'><a class="project child leaf " href="/redmine/projects/prj">prj</a></div>
        </li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Answer 1

对于可折叠树视图，您必须包含一个元素，该元素包含 menu.For 示例的先前状态，我使用复选框来处理菜单子项的切换事件 list.Like 这个，你可以相应地设计你的代码，在复选框中分配一个切换状态。

Demo HTML:

<ul class="tree">
 <li>
  <label for="checkbox1">Click to open list 1</label>
  <input type="checkbox" id="checkbox1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="checkbox2">Click to open list 2</label>
  <input type="checkbox" id="checkbox2" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>

demo CSS:

.tree li > input[type=checkbox] + * {
 display: none;
}

.tree li > input[type=checkbox]:checked + * {
 display: block;
}

.tree li > input[type=checkbox] {
 display: none;
}

Answer 2

适合您的最终代码。检查

$("li a.parent").on("click", function (e) {

    $(this).parent().parent().children('ul').toggle();
     e.preventDefault()
     e.stopPropagation();
});
$(function(){
$('li.child>ul.projects li.child').children('li>ul').hide();

});

覆盖 css 以创建树视图

Override css to create a tree view

html

css

redmine