树形菜单中的圆角[重复]答案

【问题标题】：Rounded corners in a tree menu [duplicate]树形菜单中的圆角[重复]
【发布时间】：2013-03-13 16:19:06
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

“我遇到了这个问题” - 什么问题？有什么问题？
你想说什么问题？
@Juhana 是的，你是对的。这可能是一个重复的问题，采用不同的方法
边角不是很清晰。 @magnum2002

标签： jquery css

【解决方案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;
}

【讨论】：

我有这个修复，但我想以可能更好的方式来做。我得到了一些东西。我只需要交叉检查。满意后我会发回。无论如何，谢谢！

【解决方案2】：

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

.tree {
    overflow: hidden;
}

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

【讨论】：