代码之家 › 专栏 › 技术社区 › Patton

覆盖css以创建树视图

redmine css html

Patton · 技术社区 · 7 年前

我尝试创建一个可折叠的树状视图,用于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>

2 回复 | 直到 7 年前

A.D. 7 年前

最终的代码对您有效。检查

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

});

A.D. 7 年前

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

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