Javascript 引导面板边界半径

我有一个包含两个引导面板的页面，每个面板都包含引导下拉菜单。面板有溢出：隐藏集，当下拉菜单打开时，它会切断下拉菜单。为了解决这个问题，我从.panel div中删除了overflow:hidden值，这就解决了这个问题

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

HTML

JS

JSFIDLE

---

如果没有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}

---

如果没有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}

---

小提琴

我只使用面板上的四舍五入img类。。。像这样：

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

---

这使我在面板上有一个漂亮的圆形边框

我只是在面板类中使用img取整。。。像这样：

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

---

这使我在面板上有一个漂亮的圆形边框

当我将面板溢出更改为可见（引导3）时，我看不到面板半径有任何差异。你确定你的HTML是正确的吗？如果我把它粘贴到一个工作的fiddle链接中，我会得到一个空面板，这将有助于我在原始问题中添加一个JSFIDLE-这显示了使用js的工作版本，但我更喜欢css解决方案？正如您将看到的，当面板闭合时，角是圆形的。当它被打开时，面板标题的底部边界半径被移除。当我将面板的溢出更改为可见（引导3）时，我看不到面板半径有任何差异。你确定你的HTML是正确的吗？如果我把它粘贴到一个工作的fiddle链接中，我会得到一个空面板，这将有助于我在原始问题中添加一个JSFIDLE-这显示了使用js的工作版本，但我更喜欢css解决方案？正如您将看到的，当面板闭合时，角是圆形的。当面板打开时，面板标题的底部边框半径将被移除。面板设置为溢出：隐藏，但我需要将其设置为溢出：可见，以允许面板内的下拉菜单与容器重叠？当.panel设置为overflow:hidden，但我需要将其设置为overflow:visible，以允许面板中的下拉菜单与容器重叠时，此功能也可以正常工作？根据

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