javascript - 如果导航打开则隐藏 div

Question

我有一个非常简单的页面，带有标准 Bootstrap 导航，在小屏幕上时会折叠。在导航的正下方，我有一个 div，如果 li 具有 CSS 类 dropdown open，我不想显示该 div。是否可以仅通过 CSS 来完成此操作，还是必须走 jQuery/Javascript 路线？

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

Answer 1

如果下拉元素没有用另一个元素包裹，您可以使用相邻的同级选择器，如下所示:

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

否则，您可以使用负边距和 z-index 来实现技巧，有效地从其后面的下拉菜单下方滑动内容，但这实际上会导致布局困惑。

使用 JavaScript 没有什么坏处。如果我没记错的话，Bootstrap 本身使用它进行导航。