我尝试为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>
答案 0 :(得分:0)
对于可折叠树视图,您必须包含一个元素,其中包含菜单的先前状态。例如,我使用复选框来处理菜单列表的子项的切换事件。就像这样,您可以设计您的代码会相应地在复选框中指定切换状态。
演示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;
}
答案 1 :(得分:0)
适合您的最终代码。检查
$("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();
});