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

你有一些问题：

我认为您的主要问题是，点击:target更改有效的li#item-3.1元素后，菜单级别2的:target规则（#item-3）将不再适用，因此子菜单折叠回其默认状态。我想不出用这个策略做一个三级菜单的好方法，但我没有多考虑它。我主要关注的是可维护性 - 您的深层嵌套，依赖于结构的规则将很快变得难以破译和扩展。如果您是CSS新手，我不推荐这种方法。

另一个问题是您使用的id值包含一个点（“.”）。这通常不是很好的做法，因为CSS选择器依靠点来指示类选择器。虽然让一个以数字开头的CSS类是非法的，但是将点完全保留在id和class值之外会更加清晰，以便以后减少混淆和特殊处理逻辑。 p>

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

HTML多级菜单

Demo on JSFiddle

1 个答案: