我目前正在开发一个导航菜单,其中任何不适合可用空间的菜单项都会附加到一个隐藏的无序列表 (ul
) 中,可以通过切换按钮访问该列表。我想要实现的是在不影响子元素的 css 的情况下将 Group-1
、Group-2
...显示为 inline-block
.我正在尝试使用下面的 css;
.hidden-link{
display:inline-block;
}
但是,当我使用这一行时,它会将所有子元素的属性更改为连续显示,而不是以表格格式显示。我也尝试过 jquery 但没有成功。
$(document).ready(function(){
$("ul.hidden-links").children().css("display","inline-block");
});
例如
<div class="container">
<ul class='hidden-links hidden'>
<li>Group1
<ul class ="flash">
<li>item-1</li>
<li>item-1</li>
<li>item-1</li>
</ul>
</li>
<li>Group2
<ul class ="flash">
<li>item-1</li>
<li>item-1</li>
<li>item-1</li>
</ul>
</li>
<li>Group3
<ul class ="flash">
<li>item-1</li>
<li>item-1</li>
<li>item-1</li>
</ul>
</li>
</ul>
</div>
最佳答案
如果我没理解错的话,你只需要选择菜单的直接子项。
这就是您所需要的。
$(document).ready(function(){
$("ul.hidden-links > li").css("display","inline-block");
});
关于javascript - 仅对父元素实现 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38291962/