折叠 jQuery 菜单并添加样式答案

【问题标题】：Collapse jQuery menu and add style折叠 jQuery 菜单并添加样式
【发布时间】：2013-08-05 09:28:43
【问题描述】：

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

谢谢

请注意我的代码可以在这里看到http://cdpn.io/GtLky工作（但需要上面的修改）

或下面这部分的完整代码

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

【问题讨论】：

看来您实际上是在尝试创建树视图。已经有几个 jQuery 插件可以做到这一点。其中一些可以在here找到。

标签： jquery html drop-down-menu styles

【解决方案1】：

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

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

【讨论】：

Maxinacube... 哇，谢谢，这正是我想做的。我如何折叠第一个菜单，所以所有菜单都折叠了？任何想法还有我如何在菜单打开时添加一个加号而不是项目符号和一个减号？
我的另一个问题是，如果可能的话，它都需要在 1 个 html 文档中。所以所有这些都需要粘贴到记事本中，保存为 HTML 然后运行。因此，为什么要从“ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”中提取命令
我已更新到 Fiddle 以展示如何将它们全部折叠。 jQuery 中有一行显示了第一行，但是如果我们删除它，所有内容都将被折叠。我还在 jQuery 中添加了一个部分，用于插入 span 作为li.collapsable 中的第一项。使用 CSS 伪类 (:after)，如果 .collapsable 具有类 .active，我们可以将 span 的内容设置为“+”或“-”。要将所有内容放在一个文档中，只需将其设置为以前的方式，底部有自定义脚本。只需在 CSS 的头部包含 <style> 标记即可。
嗨，Maxincube。我真的很喜欢你所做的。我创造了这个。我终于得到了一些工作。现在唯一的问题是我遇到了一个绊脚石。我决定使用 jsdidle（比 codepen 好得多）将这一切拆分为 css、java 等，我的问题是，如果我在子菜单中添加子菜单，我会松开箭头，默认情况下会打开子菜单项。知道如何在子菜单上添加箭头并在默认情况下仅在鼠标单击时停止打开它？ jsfiddle.net/neosegauk/rtkeR/4
抱歉回复晚了，非常感谢您的帮助。这对所有反馈都很有效。