HTML多级菜单

Question

我有点卡住了。主要是因为我是个新手。我需要能够创建可扩展/可折叠的在线内容用于自助。我到处找，都找不到我真正需要的东西。我需要一个简单的垂直多级菜单系统。我几乎有我所需要的附加代码。我想我遗漏了最后一个选择器。你们谁能帮我创建最后一个需要的选择器？在这段代码中，当我单击子子菜单时，它会折叠父菜单，我需要它来展开子子菜单吗？请帮帮我！

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元素，menu level 2 (#item-3)的:target规则就不再适用，因此子菜单将折叠回其默认状态。我想不出一个好的方法来使用这个策略来制作一个三级菜单，但我并没有花太多的心思。我主要关心的是可维护性--您的深度嵌套的、依赖于结构的规则将很快变得难以理解和扩展。如果您是CSS新手，我不推荐使用这种方法。

另一个问题是您使用的id值包含一个点(".")。这通常不是一个好的实践，因为CSS选择器依赖于点来指示类选择器。虽然以数字开头的CSS类是非法的，但在id和class值中完全去掉点会更干净，以减少混淆和以后的特殊处理逻辑。

最后一个问题是，你是否真的应该在一开始就使用像这样的深度嵌套菜单。深层菜单通常是您应该重新考虑应用程序设计的标志。这是一个指导方针，而不是一个硬性的规则，某些复杂的应用程序保留了这种结构的价值，但大多数网站并不需要它。