Question

我希望你们中的一个人能够帮助我创造一些东西。我正在创建一个树状菜单，它将在我的计算机上打开文档。到目前为止，下面的代码是我创建的。我的问题是我希望它在打开时完全折叠，除非点击，否则不显示内容。我该怎么做呢？我还想要一点点加箭头，点击时变成负号，而不是子弹点，任何想法？（我对所有这些东西都是新手）

由于

请注意我的代码http://cdpn.io/GtLky可以在{{3}}工作（但需要上述修订）

或以下本节中的完整代码

<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>

Answer 1

我使用.Collapsable元素稍微清理了一些内容并制作了JSFiddle来演示。

基本上，我们简化了HTML并加强了jQuery。

折叠jQuery菜单并添加样式

1 个答案: