0

当我尝试为带有一些菜单项背景的树形菜单设置圆角时，我遇到了这个问题。请在此处找到示例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');
});
});

任何帮助，将不胜感激。

4

2 回答 2

1

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

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

您必须为第一个和最后一个“.tree ul li span”元素赋予与“.tree”容器相同的边框半径和边框颜色。

.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;
}
于 2013-03-13T07:24:29.410 回答
0

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

.tree {
    overflow: hidden;
}

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

于 2013-03-13T08:19:06.110 回答