没有子级的列表项的 CSS 或 JS 来自有子级的同级列表项答案

【问题标题】：CSS or JS for list item with no children from sibling list item with children没有子级的列表项的 CSS 或 JS 来自有子级的同级列表项
【发布时间】：2011-09-26 01:11:59
【问题描述】：

我正在创建一个下拉菜单，如果主列表项没有子菜单，我希望在悬停时在所有四个角上添加圆角边框，但如果菜单列表项有子菜单，我希望只在悬停时将顶角圆角.子菜单本身不会有任何圆形边框，并且会融入父菜单的选项卡中。创建菜单的 HTML 源自 WordPress 函数 (wp_page_menu)，该函数不会为不带子项的 li 标签和带子项的 li 标签创建不同的 CSS 类。

当列表项被鼠标悬停时，此 CSS 会在菜单列表项周围创建一个深灰色圆角矩形。但如果菜单列表项没有子项，我只想要这种效果。

.menu ul li:hover a { 
    background:#111;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

好的，现在没有子项的主菜单列表项有 4 个圆角边框，而有子项的主菜单列表项只有顶部圆角边框。所以这很好。但是....现在子列表项也是选项卡式的（即，子菜单继承了选项卡式父项的样式）。我已经对样式表大惊小怪了几个小时，却无法得到我想要的东西。子列表项不应有任何圆形边框。使用 jQuery 和/或 CSS，如何防止子菜单继承？

【问题讨论】：

好吧，别管我最后的评论了。我现在也开始工作了。现在我只需要弄清楚当子菜单链接都很短时，如何使子菜单至少与父菜单一样长。
最后评论 - 我希望！那么 jQuery 方法在 IE9 中不起作用（适用于 Firefox、Chrome 和 Safari）。有人知道 IE 的解决方法吗？
一位热心且乐于助人的用户在我的 CSS 中发现了一个 IE 不喜欢的错误。修复了这个问题，现在 jQuery 在 IE9 中可以正常工作了。

标签： css menu drop-down-menu

【解决方案1】：

如果你在那个网站上有 jQuery，那么你可以放这样的东西

$(function(){
  $('.menu li').has('ul').addClass('has-subitems');
});

这会将has-subitems 类添加到所有具有子菜单的菜单项。之后，您可以在 CSS 中适当地设置它们的样式：

.menu li.has-subitems {  ... }
.menu li:not(.has-subitems) {  ... }

【讨论】：

非常感谢 c-smile。这正是我想要的！
好的，现在没有子项的主菜单列表项有 4 个圆角边框，而有子项的主菜单列表项只有顶部圆角边框。所以这很好。但是....现在子列表项也是选项卡式的（即，子菜单继承了选项卡式父项的样式）。我已经对样式表大惊小怪了几个小时，却无法得到我想要的东西。子列表项不应有任何圆形边框。使用 jQuery 和/或 CSS，如何防止子菜单继承父样式？
据我了解，您需要类似：$('.menu li').has('>ul')，它将找到所有li 将ul 作为直系子级的东西。 jQuery AFIAK 中没有这样的东西。但是写这样的hasChild(selector) 扩展是微不足道的。

【解决方案2】：

如果您只想对某些角进行圆角处理，可以像这样使用border-top-left-radius：

border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;

如果您尝试将此 CSS 仅添加到没有子元素的 <li> 元素，您将不得不使用 javascript/jQuery，因为它在 CSS 中是不可能的（目前）。你可以使用solution that @c-smile posted。

【讨论】：

感谢您回复 rfausak。我确实有单独的边框 CSS，我需要上面发布的 JS/JQuery。