Javascript 仅对父元素实现css

我目前正在开发一个导航菜单，其中任何菜单项都不适合可用空间，并被添加到一个隐藏的无序列表（

ul

）中，该列表可以通过切换按钮访问。我想实现的是将

Group-1

，

Group-2

…显示为

内联块

，而不影响子元素的css

.hidden-link{
    display:inline-block;
}

但是，当我使用这一行时，它将所有子元素的属性更改为以行而不是表格格式显示。我也尝试过jquery，但没有成功

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

e、 g

第一组

项目-1
项目-1
项目-1


第2组

项目-1
项目-1
项目-1


第3组

项目-1
项目-1
项目-1

如果我理解正确，您只需选择菜单的直接子菜单即可

这就是你所需要的

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

---

如果希望每个元素都显示在单独的行上，那么应该使用

display:block

而不是“inline block”

---

有关内联块的更多信息，请参见此处

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

.hidden-links li{
  display: inline-block;
 }
 li .flash li{
  display: block;
 }

---

您的html无效。您只能在

ul

的根目录中使用

li

。ul不能是其他ULSorry的直接子元素。现在有一些错误已修改。是否有办法使用jquery实现这一点，以便只有css可以应用于父元素。感谢Paulie，当您在css:-）ul.hidden-links>li中指定选择器时，它确实起作用{显示：内联块；}

.hidden-links li{
  display: inline-block;
 }
 li .flash li{
  display: block;
 }