Question

当我尝试为树状菜单添加圆角以及菜单项的某些背景时，我遇到了这个问题。请在此处找到示例http://jsfiddle.net/ardeezstyle/WqGgh/。

HTML代码

<div class="tree">
    <ul>
        <li>
            <span>Menu One</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
        </li>
        <li class="expanded">
            <span>Menu Two</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
        </li>
        <li>
            <span>Menu Three</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
       </li>
       <li>
            <span>Menu Four</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
       </li>
  </ul>

CSS代码

.tree {
border: 1px solid #bababb;
border-radius:4px;
width: 300px;
}
.tree ul {
    list-style:none;
    padding:0;
    margin:0;
}

.tree ul li span{
    display: block;
    padding: 5px 10px 5px 20px;
    background:#f0f0f0;
    border-top: 1px solid #bababb;
    cursor:pointer;
}

.tree ul li:first-child span{
    border-top: none;
}

.tree ul ul li{
    display: block;
    padding: 5px 10px 5px 20px;
    border-top:1px solid #bababb;
}

.tree ul ul li.hover{
    background: #f5f5f5;
}

.tree ul li ul{
    display: none;

}

.tree ul li.expanded ul{
    display: block;
}

.tree ul li.expanded span{
    background: #e1e2e3;
}

JS代码

$(function(){
$('.tree ul li span').click(function(){
    $('.tree ul li').removeClass('expanded');
    $(this).parent('li').addClass('expanded');
});


$('.tree li').bind('mouseover', function(){
    $(this).addClass('hover');
});
$('.tree li').bind('mouseout', function(){
    $(this).removeClass('hover');
});
});

任何帮助都将不胜感激。

Answer 1

我能想到的唯一问题是角落里的“缺失”边框颜色......

如果这应该是问题：孩子的背景颜色覆盖角落的边框颜色。

你必须给第一个和最后一个“.tree ul li span”-elements提供相同的border-radius和border-color“.tree”-container。

.tree ul li span:first-of-type {
    border-top-left-radius:15px;
    border-top-right-radius:15px;}

.tree ul li + li span:first-of-type {
    border-radius:0px
}

.tree ul li span:last-of-type {
    border-bottom-left-radius:15px !important; /* instead of "!important you should use another selector for higher specificity to overwrite the preceding ".tree ul li + li span:first-of-type"-definition */
    border-bottom-right-radius:15px !important;
}

Answer 2

碰巧很简单。我刚为类树添加了 overflow：hidden 。它解决了我的问题。我已经检查了IE9，IE10，FF，Chrome，Windows中的Opera和FF，Safari，Mac OS中的Chrome等浏览器。请在此处找到http://jsfiddle.net/ardeezstyle/WqGgh/1/

.tree {
    overflow: hidden;
}

感谢所有回复。赞赏他们。

树状菜单中的圆角

2 个答案: