Question

我试图制作一个jquery accordeon，其中父母LI有一个边界半径，这个边界半径必须只应用于包裹整个li的父，但不能应用于其内部和内部元素具有适当边距和不同的任何内容样式，就像我试图给ul的独有样式，以及LI父母里面的li元素一样，它们继承了父LI的边界半径和样式。

<ul>
    <li><a href="#"><span>Dades de contacte</span></a></li>
    <li><a href="#"><span>bbva</span></a></li>
    <li><a href="#"><span>i presentacions</span></a></li>
    <li><a href="#"><span>servei contingència catsalut</span></a></li>
    <li><a href="#"><span>comunicats</span></a>
        <ul>
            <li>
                <a href="#"><span>29 Octubre 2013</span></a>    
            </li>
            <li>
                <a href="#"><span>18 Octubre 2013</span></a>    
            </li>
        </ul>   
    </li>
    <li><a href="#"><span>consultat</span></a></li>
</ul>

这是HTML和CSS http://jsfiddle.net/vwyv6/

您可以在子列表中实现问题，我希望那些具有完全不同的样式而不是由边框半径包裹，我希望圆角只显示在父LI上。

这是我想要完成的事情： Image

任何帮助都将非常感激。

Answer 1

您真正需要的是HTML中的某个类来帮助您设置样式

例如

HTML

<ul class="parent">
    <li><a href="#"><span>Dades de contacte</span></a></li>
    <li><a href="#"><span>bbva</span></a></li>
    <li><a href="#"><span>i presentacions</span></a></li>
    <li><a href="#"><span>servei contingència catsalut</span></a></li>
    <li><a href="#"><span>comunicats</span></a>
        <ul>
            <li>
                <a href="#"><span>29 Octubre 2013</span></a>    
            </li>
            <li>
                <a href="#"><span>18 Octubre 2013</span></a>    
            </li>
        </ul>   
    </li>
    <li><a href="#"><span>consultat</span></a></li>
</ul>

CSS

ul,li,a {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        font-weight: normal;
        text-decoration: none;
        line-height: 1;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        position: relative;
}

a {line-height: 1.3;}

.parent >li {
    background: #ddeaed;
    margin-bottom: .5em;
    border-radius:10px;
    }

ul>li>a {
        font-size: 1em;
        color: #008ba9;
        display: block;
}

.parent >li>a:hover {
    background: #008ba9;
    text-decoration: none;
    color:white;
    border-radius:10px;
}     

ul>li>a>span {
    display: block;
    padding: 12px 10px;
}   


ul  ul > li  span {
    background: blue;
}

ul>ul>li {
    background: white;  
    padding: 0;
    border-bottom: 1px solid black;}

ul>ul>li>a {display: block;}

ul>ul>li>a:hover {
    background: white;
    color: blue;
}

请注意，我用类名

替换了一些ul

fiddle

手风琴与边缘半径的李父母手风琴

1 个答案: