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

I have a list made from one 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>

I made a css accordion menu for it:

我为它做了一个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;
}

see the menu here:

看到这里的菜单:

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

but It doesn't go very well .. everything is fine but the last css code:

但它不是很好..一切都很好,但最后的CSS代码:

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

this code was expected to change the height of sub-menu from 0 to auto . I don't know how to target the same class... can anyone help me with this problem please ?

此代码有望将子菜单的高度从0更改为auto。我不知道如何针对同一个班级......任何人都可以帮我解决这个问题吗?

1 个解决方案

#1

The problem with this method is that when you click on a sub-menu link the sub-menu becomes the target and will collapse. With CSS we can't target it's parent based on the sub-menus state.

此方法的问题在于,当您单击子菜单链接时,子菜单将成为目标并将折叠。使用CSS,我们无法根据子菜单状态来定位它的父级。

If you want to do this with CSS, you could do this with a checkbox / radio input as so:

如果你想用CSS做这个,你可以用复选框/无线电输入这样做:

Have a jsFiddle!

有一个jsFiddle!

The ul directly after the input is targeted when the input is checked. We can hide the checkbox, just make sure that the labels for attribute matches the inputs id.

检查输入后,直接输入后的ul是目标。我们可以隐藏复选框,只需确保属性的标签与输入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;
}

#1