html - CSS :target in an accordion menu with one class

Question

我有一个类(class)列表，

<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 Accordion 菜单:

/*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 。 我不知道如何针对同一个类(class)...... 谁能帮我解决这个问题？

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;
}