在 bootstrap 侧边栏中隐藏特定元素

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(); if a URL parameter was specified. However, this caused DOM/Page flicker, so I added .internal {display: none} 到我的 .css 文件，现在在我的 ready[ 中调用 $('.internal').show(); =30=] 指定参数时。

换句话说，Intro 始终显示，但 First Item 应仅在指定 URL 参数时显示。

这对我的 firstItemDiv 非常有用，但我的边栏 internal li 元素（第一个项目) 仍然显示。我怎样才能让它默认不显示？

Answer 1

您还应该附上 css。如果我理解正确，你改变 .internal （隐藏或显示）并且它适用于 id='firstItemDiv' 而不适用于 class="sidebar internal" 因为它使用一些 javascript propably...

尝试使用

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

Answer 2

（真实的忏悔：我能够看到有问题的实际页面）

这里的问题是有一个 more "specific" 规则覆盖了 "internal" class 规则。有一个 "id" 特异性的规则：

#sidebar ul li a {
    display: block;
}

另一个具有 class 特异性：

.internal {
    display: none;
}

将第二个更改为：

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

应该修复它。

在 bootstrap 侧边栏中隐藏特定元素

Hide specific elements in bootstrap sidebar

css

sidebar

show

hide

twitter-bootstrap-3