仅将 css 实现到父元素

Implementing css to parent element only

本文关键字：元素 实现 css 仅将      更新时间：2023-09-26

我目前正在研究一个导航菜单，其中任何不适合可用空间的菜单项都会附加到隐藏的无序列表（ ul ），可以通过切换按钮访问。我想实现的是显示Group-1，Group-2...作为inline-block，不影响子元素的 CSS。我正在尝试使用以下 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");
});

如果您希望每个元素都显示在单独的行中，那么您应该使用display: block而不是"inline-block"。

有关inline-block的更多信息，请点击此处 http://www.w3schools.com/css/css_inline-block.asp

您可以使用简单的 css 技巧来解决此问题。在不同的 css 中设置两个 ul 的样式。

.hidden-links li{
  display: inline-block;
 }
 li .flash li{
  display: block;
 }
相关文章：