Question

我有某种特殊的情况。

我有以下结构

<div class="menu_left">
    <ul>
       <li class="current">A</li>
       <li>B</li>
    </ul>

    <ul>
      <li>C</li>
      <li>D</li>
    </ul>
</div>

我的css是

.menu_left ul li ul { display:none; }

现在我想显示：具有li类当前的ul的块。因此，在上面的示例中，我想显示：none表示第二个ul而不是第一个。

老实说，如果可以通过css或jqyery完成，我绝对不知道。

非常感谢任何帮助/提示。提前谢谢。

Answer 1

由于没有CSS父选择器，目前无法单独使用CSS。

要使用jQuery执行此操作，但很简单，使用closest()（或.parent()）。

请注意，您的CSS选择器不正确，并且不符合任何内容：

<强> CSS

.menu-left ul {
    display:none;
}

<强>的jQuery

$('.menu-left li.current').closest('ul').show();

JSFiddle

Answer 2

使用纯CSS无法做到这一点。但你可以用jQuery做这样的事情：

$('ul li.current').parent().css('display', 'block');

这将选择所有li个类current，然后为其父级设置display: block。

Answer 3

你必须在这里使用javascript，因为还没有:parent CSS选择器（

）

$('.menu-left ul').hide(); // hide all UL
$('.menu-left li.current').parent().show(); // Show the one with .current LI

Answer 4

您可以使用jQuery选择器：first-of-type

IntStream.iterate

IntStream.generate

$( document ).ready(function() {
$("ul:first-of-type").show();

});

使用css基于li类显示块到ul

4 个答案: