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 /页面闪烁，因此我在我的.css文件中添加了 .internal {display：none} ，现在调用 $（'。internal'） .show（）; 在我的就绪中，当指定了参数后。

换句话说，总是显示简介，但是第一项仅在指定URL参数时显示。

这对我的 firstItemDiv 非常有用，但是我的侧边栏内部 li元素（第一项）仍然显示。如何获得默认情况下不显示？

Answer 1

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

尝试使用

$(".internal').css("display" , "none!important")而不是$(".internal").hide()，并且 $(".internal').css("display" , "block!important")而不是show()。

Answer 2

（真实的告白：我能够查看该问题的实际页面）

这里的问题是，有一个更“特定的”规则取代了“内部”的类规则。有一个具有“ id”特异性的规则：

#sidebar ul li a {
    display: block;
}

和另一个具有类特异性的

.internal {
    display: none;
}

将第二个更改为：

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

应该修复它。

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

2 个答案: