隐藏引导侧边栏中的特定元素

Question

>我有以下代码

<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="navhead">My Title</li>
<li> <a href="#intro" class="sidebar">Introduction</a></li>
<li>
<a href="#firstCategory" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle sidebar">First Category</a>
<ul class="collapse list-unstyled" id="firstCategory">
<li><a href="#firstCategory2" class="sidebar">Intro</a></li>
<li><a href="#firstItem" class="sidebar internal">First Item</a></li>
...
<a id="firstItem"></a>
<div id="firstItemDiv" class="internal">
...

我曾经用$('.internal'(.hide(( 隐藏我的 $(document(.ready(function ((中的内部类;如果指定了 URL 参数。 但是，这导致了 DOM/Page 闪烁，所以我在我的.css文件中添加了 .internal{display： none}，现在在指定参数时调用 $('.internal'(.show((;

换句话说，简介始终显示，但"第一项"应仅在指定 URL 参数时显示。

这对我的第一个项目分区非常有用，但我的侧边栏内部li 元素(第一个项目(仍然显示。 如何让它默认不显示？

Answer 1

(真正的坦白：我能够偷看有问题的实际页面(

这里的问题是，有一个更"具体"的规则凌驾于"内部"类规则之上。 有一条具有"id"特异性的规则：

#sidebar ul li a {
display: block;
}

另一个具有类特异性：

.internal {
display: none;
}

将第二个更改为：

#sidebar .internal, .internal {
display: none;
}

应该修复它。

Answer 2

您也应该附加css。 如果我理解正确，您可以更改.internal(隐藏或显示(，它适用于id='firstItemDiv'，不适用于class="sidebar internal"，因为它可能使用一些 JavaScript...

尝试使用

$(".internal').css("display" , "none!important")而不是$(".internal").hide()和$(".internal').css("display" , "block!important")而不是show().