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

私が考えることができる唯一の問題は、コーナーの「行方不明」の境界線の色です...

これが問題になる場合: 子の background-color が角の border-color の上に重なっています。

最初と最後の「.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

たまたま非常に単純です。クラスツリーにoverflow: hiddenを追加しました。それは私の問題を解決しました。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 に答える