如何使用jquery为特定元素执行“display = block”

Question

我使用以下CSS代码隐藏元素。

#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul
{
     display:none;
}

现在我正在尝试使用以下jquery代码使其可见，但它无效。

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').style.display = 'block';

如何让它发挥作用？

Answer 1

您需要使用.css()

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')

Answer 2

执行此操作的'官方'jQuery方法是使用jQuery为此提供的功能

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show();

请注意，这仅适用于display:none是内联而非CSS中的内容，因为未添加明确的display:block声明。

因此，如果您想明确设置CSS操作，您可能还希望使用

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')

甚至可以获得纯元素并更改纯元素的样式

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').get(0).style.display = "block";

最后，根本不更改css属性是一个非常好的主意，但删除并添加类，例如拥有类.activated，并在隐藏元素时将其删除（其中display:block为仅设置为激活状态）

 $('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').removeClass('activated')

这个的一个非常重要的优点是你只改变了DOM的状态，CSS处理它应该响应的方式，而不是将CSS和javascript混合在一起。

Answer 3

最佳解决方案是使用这种方式：

$('#DeltaPlaceHolderLeftNavBar div li > ul').show();

.show()会将样式添加到display:block;。

Fiddle

Answer 4

尝试$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')

<强>更新

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show()可能无效，因为有difference between them。所以$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').css('display', 'block')是要走的路。

Answer 5

你可以使用

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').prop('display', 'block');

或

$('#DeltaPlaceHolderLeftNavBar div>div>ul>li>ul').show();