父菜单和子菜单垂直分隔符(唯一，高级)
父菜单和子菜单垂直分隔符(唯一，高级)
提问于 2013-03-28 01:40:21
我在http://www.roydukkey.com有下面的导航。导航被设计为在父菜单和其子菜单之间有垂直分隔符。如果你在“联系人”菜单项下看，它看起来像它的设计方式，但是在“项目”下面看一看。如果菜单上没有子项，就不应该存在are垂直分隔符。
如何通过CSS来实现正确的设计？
目前无法通过CSS.实现。
下面是我选择的解决方案：
// Naivagation Vertical Separator Counter
$("#main > ul > li > ul .level-has-sub").each(function(){
$(this).find("> ul > li")
.slice(0, $(this).find("~ li").length + 1)
.addClass("vertical-separator")
});它们只是为垂直分隔符设置这些项目的样式。
Stack Overflow用户
发布于 2013-03-31 22:00:50
您不能精确地这样做，因为CSS还不能(还)知道另一个DOM元素的子元素数。
CSS4可能在不久的将来能够做到这一点(提升到样式的父级)：http://www.w3.org/TR/selectors4/#subject。这看起来也很有趣，尽管不是纯CSS；http://demo.idered.pl/jQuery.cssParentSelector/。也许您可以在计算子菜单的子菜单后再次下降，但是用CSS所具有的低逻辑选择方法来实现这一点将非常复杂。
您可能最好在沙斯中这样做，但是这样就不再是本地CSS了，然后您就可以回到JavaScript了。
这里有一个例子，说明父母自己的风格是如何根据“至少”有多少个孩子来决定的；
JSfiddle
<ul>
<li>
<ul class="submenu">
<li>Contact 1.1</li>
<li>Contact 1.2</li>
<li>Contact 1.3</li>
<li>Contact 1.4</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul class="submenu">
<li>Contact 2.1</li>
<li>Contact 2.1</li>
<li>Contact 2.3</li>
</ul>
</li>
</ul>CSS
li {
list-style: none;
display: inline-block;
border: 1px dotted red;
padding: 15px;
}
.submenu li {
display: block;
padding: 15px;
border: 0px;
border-top: 1px dotted blue;
}
.submenu li:nth-child(1) {
border: 0px;
}
/* This style only happens if the menu has 4 or more children li's */
.submenu li:first-child:nth-last-child(4),
.submenu li:first-child:nth-last-child(4) ~ li {
border-left: 1px dotted blue;
}祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15672756
复制相关文章
相似问题
腾讯云开发者
