0

我希望你们中的一个人能够帮助我完成我正在创造的东西。我正在创建一个树形菜单,它将在我的计算机上打开文档。到目前为止,下面的代码是我创建的。我的问题是我希望它在打开时完全折叠,除非单击,否则不显示内容。我该怎么做呢?我还想要在单击时变成减号的小加号箭头,而不是项目符号,有什么想法吗?(我对所有这些东西有点陌生)

谢谢

请注意我的代码可以在这里看到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>
4

1 回答 1

0

.Collapsable我用元素清理了一些东西,并制作了一个JSFiddle来演示。

基本上,我们简化了 HTML 并增强了 jQuery。

于 2013-08-04T17:09:40.277 回答