css :target 在具有一类的手风琴菜单中

Question

我有一个由一个班级组成的清单，

<ul class="ac-menu">
    <li><a href="#">a</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
    <li><a href="#">b</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </li>
    <li><a href="#">c</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </li>
    <li><a href="#">d</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
    <li><a href="#">e</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
</ul>

我为它制作了一个 css 手风琴菜单：

/*css code*/
.ac-menu,
.ac-menu ul,
.ac-menu li,
.ac-menu a,
.ac-menu span {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

.ac-menu li {
    list-style: none;
}


.ac-menu li > a {
    display: block;
    position: relative;
    padding: 0 10px 0 0;
    text-align: center;
    height: 32px;
    color: #FFFFFF;
    text-decoration: none;
    background: #343435;

}

.ac-menu > li:hover > a,
.ac-menu > li:target > a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);


    background: #20a4ca;
}

.ac-menu li ul li a {
    color: #797979;
    background: #eae9e9;
    border-bottom: 1px solid #c1bfbf;

}

.ac-menu li ul li:hover a { background: #f6f5f5; }

.ac-menu li ul {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .2s ease-in-out;
    -moz-transition: height .2s ease-in-out;
    -o-transition: height .2s ease-in-out;
    -ms-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
}

/* this is the problem */
.ac-menu :target > .ac-menu li ul {
    height: auto;
}

在此处查看菜单：

http://jsfiddle.net/ahmadyousef/222dgr9j/

但它并不顺利.. 一切都很好，但最后的 css 代码：

.ac-menu :target > .ac-menu li ul {
    height: auto;
}

此代码应将子菜单的高度从 0 更改为 auto 。 我不知道如何针对同一类... 谁能帮我解决这个问题？

Answer 1

这个方法的问题是当你点击一个子菜单链接时，子菜单变成了目标并且会崩溃。使用 CSS，我们不能根据子菜单状态来定位它的父级。

如果您想使用 CSS 执行此操作，您可以使用复选框/单选框输入来执行此操作：

Have a jsFiddle!

检查输入时，直接在输入之后的ul 是目标。我们可以隐藏复选框，只需确保标签 for 属性与输入 id 匹配。

HTML

<ul class="ac-menu">
    <li id="a"><label for="sub-one">a</label>
        <input type="checkbox" id="sub-one" />
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </li>
</ul>

CSS

.ac-menu > li input:checked + ul {
    height: auto;
}
input[type=checkbox] {
    display: none;
}