javascript - Bootstrap 面板边框半径

Question

我有一个包含 2 个 Bootstrap 面板的页面，每个面板都包含 Bootstrap 下拉菜单。面板有溢出:隐藏设置，当下拉菜单打开时会切断它们。为了解决这个问题，我从 .panel div 中删除了 Overflow:hidden 值，这解决了问题。

这会导致 .panel-heading div 出现另一个问题，它现在与其父 .panel div 重叠。我在 .panel div 上设置了 4px 边框半径，但当面板关闭时，它与 .panel-heading div 重叠。我尝试在 .panel-heading div 上设置 4px 边框半径，然后使用 javascript 切换一个类，该类在面板打开时删除底部边框半径，这似乎确实有效，但我更喜欢使用 CSS如果可能的话解决方案？

HTML

 <div class="panel-group" id="accordion">
 <div class="panel panel-default">

 <div class="panel-heading radius">
 <a class="search-toggle collapsed" data-toggle="collapse"  data-parent="#accordion" href="#collapse1">Search</a></div>

    <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">
    <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Yes/No</a>
    <ul class="dropdown-menu">
    <li><a data-value="Yes">Yes</a></li>
    <li><a data-value="No">No</a></li></ul>
    </div></div></div></div></div>


    <div class="panel-group" id="accordion">
    <div class="panel panel-default">

    <div class="panel-heading radius">
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Search</a></div>

    <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">

    <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Number </a>
    <ul class="dropdown-menu">
    <li><a data-value="1">1</a></li>
    <li><a data-value="2">2</a></li>
    <li><a data-value="3">3</a></li></ul>
     </div></div></div></div>

CSS

.panel-group .panel{border-radius:4px}
.panel-heading{border-radius:4px;padding:10px 15px}
.removeradius{border-bottom-left-radius:0px;border-bottom-right-radius:0px}

JS

$(".radius").click(function(){
    $(".panel-heading").toggleClass('removeradius');});

JSFiddle

http://jsfiddle.net/81u6gwbf/

Answer 1

如果没有 JavaScript，就不可能选择 previous sibling 姐妹。您可以尝试这样的解决方法，但不确定 has() 选择器是否适用于所有浏览器

/*This matches all .panel-heading elements with direct child with class .collapsed*/
.panel-heading:has(> .collapsed) {border-radius:4px;} 
.panel-default > .panel-heading{background-color:blue;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding:10px 15px}

fiddle here