javascript - 仅对父元素实现 css

Question

我目前正在开发一个导航菜单，其中任何不适合可用空间的菜单项都会附加到一个隐藏的无序列表 (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>

Answer 1

如果我没理解错的话，你只需要选择菜单的直接子项。

这就是您所需要的。

$(document).ready(function(){
    $("ul.hidden-links > li").css("display","inline-block");
});