Question

基于this thread，我试图建立一个仅限css / html的手风琴菜单。当我从上面学到的东西，并将它应用到我的divs，它完美地工作。我还需要添加一个与第一个菜单项组合相同的子菜单。我尝试了没有成功。有人向我解释说原因是我使用的是同一个目标。

（首先，对于很多这些事情我是新手，所以虽然我有一些问题可能看起来很基本，但是因为我正在学习。）

根据反馈，我试图制作一个新版本，创建2个手风琴课程。虽然这并没有打破我想要的功能，但它仍然存在打开两个子菜单的问题。单击PORTFOLIO时，应显示BRANDING。单击“品牌”时，应显示“内容”。相反，当您单击PORTFOLIO时，将显示品牌和内容。

有人指出这是因为第一个手风琴功能包括所有儿童对象。虽然我已经在js中简要地谈到了那些我正在学习的东西我不知道如何在css中使用它们而不是：not（x）我遇到了但是似乎没有解决它尽管我可能做错了。

jsfiddle

以下是上述jsfiddle链接的css：

a {
    color:inherit;
    text-decoration:none;
    font-style:normal;
}
/* ---------- SECTION ---------- */
 .accordion p + div :not(.accordion2) {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}
.accordion :target p + div :not(.accordion2) {
    height:auto;
}
.accordion .section.large:target p + div :not(.accordion2) {
    overflow: auto;
}
.section p {
    color:#FFFfff;
    text-align:right;
    min-width:200px;
    background-color:#2d2d2d;
    font-size:12px;
    font-size-adjust:inherit;
    padding:0px;
    margin:0px;
    border-top:#161616 1px solid;
    text-decoration:none;
    text-transform:uppercase;
    text-decoration:none;
    color:#ffffff;
}
.section p a {
    display:block;
    text-align:right;
    padding-right:10px;
    padding-left:10px;
    padding-top:3px;
    padding-bottom:3px;
    min-width:180px;
}
.section p a:hover {
    background-color:#c569f2;
}
/* ---------- SubSection ---------- */
 .accordion2 p + div {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}
.accordion2 :target p + div {
    height:auto;
}
.accordion2 .subsection.large:target p + div {
    overflow: auto;
}
.subsection p {
    color:#FFFfff;
    text-align:right;
    min-width:200px;
    background-color:#3d3d3d;
    font-size:12px;
    font-size-adjust:inherit;
    padding:0px;
    margin:0px;
    border-top:#161616 1px solid;
    text-decoration:none;
    text-transform:uppercase;
    text-decoration:none;
    color:#ffffff;
}
.subsection p a {
    display:block;
    text-align:right;
    padding-right:10px;
    padding-left:10px;
    padding-top:3px;
    padding-bottom:3px;
    min-width:180px;
}
.subsection p a:hover {
    background-color:#c39bda;
}
/* ---------- Sidebar ---------- */
 #sidebar {
    float: right;
    right: 0px;
    background-color:#161616;
    position:fixed;
    width:20%;
    min-height: 100%;
    min-width: 200px;
    top:0px;
}
#side-menu {
    right: 0px;
    top:0px;
    position:absolute;
    height:75%;
    width:100%;
    min-width: 200px;
    bottom:0px;
    margin-bottom:0px;
    min-height:600px;
}

这是html：

<div id="sidebar">
    <div id="side-menu" class="accordion">
        <div id="menu-portfolio" class="section">
            <p> <a href="#menu-portfolio">Portfolio</a>

            </p>
            <div class="accordion2">
                <div id="submenu-branding" class="subsection">
                    <p> <a href="#submenu-branding">Branding</a>

                    </p>
                    <div>
                        <p> <a href="google.com">Content</a>

                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="menu-about" class="section">
            <p> <a href="#menu-about">About</a>

            </p>
            <div>
                <p><a href="google.com">Resume</a>
                </p>
            </div>
        </div>
        <div id="menu-contact" class="section">
            <p> <a href="#menu-contact">Contact</a>

            </p>
            <div>
                <p><a href="google.com">Content</a>
                </p>
                <p><a href="google.com">Content2</a>
                </p>
                <p><a href="google.com">Content3</a>
                </p>
            </div>
        </div>
    </div>
</div>

任何人都可以帮我理解我做错了吗？

Answer 1

我没有查看过您的代码，但就像您说的那样“它包含了所有子对象”。您可以使用直接后代选择器“＆gt;”来阻止这种情况。它只会获得直接的子元素，例如

ul > li {

}

只会设置li元素的样式，而不会在其中设置其他li元素。

Answer 2

使用div或列表无关紧要（尽管大多数教程都会使用列表）。它主要引用正确的项目。简要地看一下代码，你没有指定不显示子子菜单。

我在你的第一个内容中添加了一个新类，以及目标在css中的作用 - 仅在之后显示div：

HTML：

<div class="subsub"> <!--added a new class. I have never used :not, but it seems that it does't allow nesting inside :not selectors -->
    <p><a href="google.com">Content</a></p>
</div>

CSS：

.accordion :target p + div :not(.subsub) {
    height:auto;
}

当您点击品牌时，您必须重复显示在子子菜单上点击投资组合时显示子菜单所做的工作。

快速小提琴：http://jsfiddle.net/jennift/m4ADf/2/

CSS html中嵌套的手风琴菜单

2 个答案: