我希望你们中的一个人能够帮助我完成我正在创造的东西。我正在创建一个树形菜单,它将在我的计算机上打开文档。到目前为止,下面的代码是我创建的。我的问题是我希望它在打开时完全折叠,除非单击,否则不显示内容。我该怎么做呢?我还想要在单击时变成减号的小加号箭头,而不是项目符号,有什么想法吗?(我对所有这些东西有点陌生)
谢谢
请注意我的代码可以在这里看到http://cdpn.io/GtLky工作(但需要上面的修改)</p>
或下面本节中的完整代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<p><font size=4>This is a test</font></p> <body>
<ul>
<li><span class="Collapsable">Test 1</span><ul>
<li><span class="Collapsable">I like cats</span></li>
<li><span class="Collapsable">Cats rule</span></li>
</ul>
</li>
<li><span class="Collapsable">This is a test 2</span><ul>
<li><span class="Collapsable">Cat love</span></li>
<li><span class="Collapsable">testy cat</span></li>
</ul>
</li>
<li><span class="Collapsable">This is a test 3</span><ul>
<li><span class="Collapsable">Master Cat</span></li>
<li><span class="Collapsable"><a href = "http://www.nme.com">NME</span></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(".Collapsable").click(function () {
$(this).parent().children().toggle();
$(this).toggle();
});
</script>