HTML 多级菜单

Question

我有点卡住了。主要是因为我是新手。我需要能够在线创建可展开/可折叠的内容以供自助使用。我到处搜索，找不到我需要的东西。我需要一个简单的垂直多级菜单系统。我在附加代码中几乎拥有我需要的东西。我想我缺少最终选择器。你们中的任何人都可以帮我创建最后需要的选择器吗？在这段代码中，当我点击 sub 子菜单时，它折叠了父菜单，我需要它来展开 sub 子菜单吗？请帮忙!

CSS 代码

 #accordion ol {
        list-style: none;
        border: 1px solid #cccccc;
        margin: 0px;
        padding: 0px;}
    #accordion ol li {
        height: 20px;
        border-bottom: 1px solid #cccccc;
        transition: height 1s ease-in-out;
        -webkit-transition: height 1s ease-in;
        -moz-transition: height 1s ease-in;
        -ms-transition: height 1s ease-in;
        -o-transition: height 1s ease-in;    
        overflow: hidden;}
    #accordion ol li ol:last-child {
        border-bottom: 0px;}
    #accordion ol li:target {
        height: 100px;}
    #accordion ol li ol{
        opacity: 0;
        padding-left: 10px;
        padding-right: 10px;
        border: 0px;
        max-width: 100%;
        max-height: 80px;
        overflow-y: auto;
        transition: all 1s ease-in;
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;}
    #accordion ol li:target ol{
        opacity: 1; }

HTML代码

<div class="page">    
        <nav id="accordion">
            <ol>
                <li id="item-1"><a href="#item-1"><span>Menu Item 1<span></a>
                    <ol>
                        <li>Sub Menu Item 1.1</li>
                        <li>Sub Menu Item 1.2</li>
                        <li>Sub Menu Item 1.3</li>
                        <li>Sub Menu Item 1.4</li>
                        <li>Sub Menu Item 1.5</li>
                        <li>Sub Menu Item 1.6</li>
                    </ol>
                </li>
                <li id="item-2"><a href="#item-2"><span>Menu Item 2<span></a>
                    <ol>
                        <li>Sub Menu Item 2.1</li>
                        <li>Sub Menu Item 2.2</li>
                        <li>Sub Menu Item 2.3</li>
                    </ol>
                </li>
                <li id="item-3"><a href="#item-3"><span>Menu Item 3<span></a>
                    <ol>
                         <li id="item-3.1"><a href="#item-3.1"><span>Menu Item 3.1<span></a>
                            <ol>
                            <li>Sub Menu Item 3.1.1</li>
                            <li>Sub Menu Item 3.1.2</li>
                            </ol>
                        <li>Sub Menu Item 3.2</li>
                        <li>Sub Menu Item 3.3</li>
                    </ol>
                </li>
            </ol>
        </nav>
    </div> 

Demo on JSFiddle

Answer 1

你有几个问题:

我认为您的主要问题是，一旦您通过单击 li#item-3.1 更改事件的 :target 元素，:target菜单级别 2 (#item-3) 的规则不再适用，因此子菜单会折叠回其默认状态。我想不出使用这种策略来制作三级菜单的好方法，但我还没有考虑太多。我主要关心的是可维护性——您的深度嵌套的、结构相关的规则将很快变得难以破译和扩展。如果您是 CSS 新手，我不推荐这种方法。

另一个问题是您使用的 id 值包含一个点(“.”)。这通常不是好的做法，因为 CSS 选择器依赖点来指示类选择器。虽然拥有以数字开头的 CSS 类是非法的，但将点完全排除在 id 和 class 值之外会更清晰，以减少混淆和特殊稍后处理逻辑。

最后一个问题是您是否真的应该首先使用像这样的深度嵌套菜单。深菜单通常表明您应该重新考虑您的应用程序设计。这不仅仅是一条硬性规定，而且某些复杂的应用保留了该结构的值(value)，但大多数网站不需要它。