Bootstrap Panel Border-Radius

Question

У меня есть страница с двумя панелями ботстрапа, каждая из которых содержит раскрывающееся меню бутстрапа. Панели имели переполнение: скрытый набор, который отключил раскрывающиеся меню, когда они были открыты. Чтобы исправить это, я удалил переполнение: скрытое значение из div .panel, и это решило проблему.

Это вызывает другую проблему, однако, с разделителем заголовка .panel, который теперь перекрывает его родительский .panel div. У меня есть радиус радиуса 4px, установленный в div .panel, но при закрытии панели это перекрывается разделителем заголовка .panel. Я попробовал установить радиус границы 4px в div заголовка .panel, а затем использовал 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. Вы можете попробовать обходной путь, как это, но не уверен, что селектор 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

Answer 2

Я просто использовать IMG-закругленные на классе панели ... как это:

<div class='panel panel-default img-rounded'> 

...

, который дает мне хорошую округлую рамку на панелях.