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

css：带有一个类的手风琴菜单中的目标

1 个答案: