如果打开导航，则隐藏div

Question

我有一个非常简单的页面，标准的bootstrap导航在小屏幕上会崩溃。在导航器的正下方，我有一个div，如果li有CSS类dropdown open，我不想显示。是否可以仅通过CSS执行此操作，还是必须沿jQuery/Javascript路线前进？

.navbar-nav > li.dropdown.open {
 /*How can I hide the div class="inner-details" here*/   
}

Answer 1

如果下拉元素没有被另一个包裹，你可以像这样使用adjecent兄弟选择器：

li.dropdown.open + .inner-details {
    display: none;
}

否则你可以使用负边距和z-index做一些技巧，有效地从其后面的下拉列表中滑动内容，但实际上这会导致布局混乱。

使用JavaScript并不邪恶。如果我没记错的话，Bootstrap本身会将它用于导航。