重写 css 以创建树视图

Question

我尝试创建一个可折叠的树视图到Redmine项目列表页面。我尝试了该插件，但它不起作用。所以我的替代方案是使用 css 插件覆盖ul，li像这样显示。检查下面的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

适合您的最终代码。检查

$("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();
});

Answer 2

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

演示 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>

演示 CSS：

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