我目前正在做一个项目，我想创建一个HTML帮助页面，为我的用户提供有关如何使用该应用程序的帮助和建议。
我想要实现的是一个树形布局，所以沿着左侧，它有所有的标题，旁边有一个加号。然后，当用户单击加号按钮或文本时，它会展开与该部分相关的内容。如果用户随后再次单击它，则显示的所有项目现在都会重新隐藏。
我找不到任何关于如何做到这一点的像样的教程。
感谢您提供的任何帮助。
我花了一些时间来构建一个快速的树系统，如您所描述的。有趣的小运动。复制和粘贴，在浏览器中打开（我正在使用火狐）。如果需要，将 DIV 标签中的 +/- 符号更改为图像。调整 CSS 边距和填充，使其无缝贴合。希望这有帮助。
祝你好运。
<html>
<head>
<style type="text/css">
div#tree ul { margin:0 0 0 20px; padding:0; list-style-type:none; }
div#tree ul { display:none; }
div#tree li>div { display:inline; margin-right:5px; cursor:pointer; }
div#tree label:hover { text-decoration:underline; cursor:pointer; }
div#tree>ul { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
//Set plus sign for all sub menus
$('li:has("ul")>div').html('+');
//Handle plus/minus tree expansion
$('li>div').on('click', function (e) {
if($(this).parent('li').hasClass('selected')) {
$(this).siblings('ul').slideUp();
$(this).parent('li').removeClass('selected');
$(this).html('+');
} else {
$(this).siblings('ul').slideDown();
$(this).parent('li').addClass('selected');
$(this).html('−')
}
})
//Handle tree item link stored as LI data attribute
$('li>label').on('click', function (e) {
//This is your URL, URI, Link, Location, etc
alert($(this).parent('li').attr('data-location'))
})
});
</script>
</head>
<body>
<div id="tree">
<ul>
<li data-location=""><div>⌊</div><label>First Level Item1</label></li>
<li data-location=""><div>⌊</div><label>First Level Item2</label></li>
<li data-location=""><div>⌊</div><label>First Level Item3</label></li>
<li data-location=""><div>⌊</div><label>First Level Item4</label></li>
<li data-location=""><div>⌊</div><label>First Level Item5</label>
<ul>
<li data-location=""><div>⌊</div><label>Second Level Item1</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item2</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item3</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item4</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item5</label>
<ul>
<li data-location=""><div>⌊</div><label>Third Level Item1</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item2</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item3</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item4</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item5</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item6</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item7</label></li>
</ul>
</li>
<li data-location=""><div>⌊</div><label>Second Level Item6</label></li>
</ul>
</li>
<li data-location=""><div>⌊</div><label>First Level Item6</label></li>
<li data-location=""><div>⌊</div><label>First Level Item7</label></li>
<li data-location=""><div>⌊</div><label>First Level Item8</label></li>
<li data-location=""><div>⌊</div><label>First Level Item9</label></li>
<li data-location=""><div>⌊</div><label>First Level Item10</label></li>
<li data-location=""><div>⌊</div><label>First Level Item11</label></li>
</ul>
</div>
</body>
</html>
你可以
使用jquery，mootools或其他js库来完成。
但如果你想自己做，试试这个：
假设您有一些这样的列表：
<div><a id="cat1" onclick="toggle(this.id)">first cat</a>
<ul id="content1">
<li>text1</li><li>text2</li>
</ul></div>
<div><a id="cat2" onclick="toggle(this.id)">second cat</a>
<ul id="content2">
<li>text1</li><li>text2</li>
</ul></div>
这是JS：
function toggle(obj)
{
var con = document.getElementById("content"+obj.substr(3));
if (con.style.display=="none") con.style.display="block"; else con.style.display="none";
}
这是一个非常简单的代码，如果你尝试一下，你可以做得更好。
有很多框架内置了这些组件。查看ExtJS，Dojo或任何其他RIA框架，看看它是否可以在您的项目中工作。有一点学习曲线，但一旦你学会了，你的代码库将更易于管理。
http://www.sencha.com/products/extjs/examples/http://cdn.sencha.com/ext-4.1.1a-gpl/examples/tree/treegrid.html