英文:
Hide specific elements in bootstrap sidebar
问题
以下是您提供的代码的翻译：
<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="navhead">我的标题</li>
<li><a href="#intro" class="sidebar">介绍</a></li>
<li>
<a href="#firstCategory" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle sidebar">第一类别</a>
<ul class="collapse list-unstyled" id="firstCategory">
<li><a href="#firstCategory2" class="sidebar">介绍</a></li>
<li><a href="#firstItem" class="sidebar internal">第一项</a></li>
...
<a id="firstItem"></a>
<div id="firstItemDiv" class="internal">
...
根据您的描述，您以前使用了以下代码来在文档准备就绪时隐藏内部类（$(document).ready(function ()），如果指定了URL参数：$('.internal').hide();。但是，这会导致DOM/页面闪烁，所以您在.css文件中添加了**.internal {display: none}，并在ready时调用$('.internal').show();**，如果指定了参数。
换句话说，介绍总是显示，但只有在指定了URL参数时，第一项才应该显示。
这对于您的firstItemDiv很有效，但是我的侧边栏internal li元素（第一项）仍然显示。您如何让它默认不显示呢？
英文:
I have the following code
<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">
...
I used to hide the internal class in my $(document).ready(function () with $('.internal').hide(); if a URL parameter was specified. However, this caused DOM/Page flicker, so I added .internal {display: none} to my .css file and now call $('.internal').show(); in my ready when the parameter is specified.
In other words, Intro always shows, but First Item should only show when the URL parameter is specified.
This works great for my firstItemDiv, but my sidebar internal li element (First Item) still shows. How can I get it not to show by default?
答案1
得分: 1
You should attach css also. If I understand correctly you change .internal (hiding or showing) and it works for id='firstItemDiv' and doesn't work for class="sidebar internal" because it uses some javascript probably...
Try to use
$(".internal').css("display", "none!important") instead of $(".internal").hide() and
$(".internal').css("display", "block!important") instead of show().
英文:
You should attach css also. If I understand correctly you change .internal ( hiding or showing ) and it works for id='firstItemDiv' and doesnt work for class="sidebar internal" because it uses some javascript propably...
Try to use
$(".internal').css("display" , "none!important") instead of $(".internal").hide() and
$(".internal').css("display" , "block!important") instead of show().
答案2
得分: 1
问题在于有一个更“具体”的规则覆盖了“内部”类规则。
有一个带有“id”特定性的规则：
#sidebar ul li a {
display: block;
}
还有一个带有类特定性的规则：
.internal {
display: none;
}
将第二个规则更改为：
#sidebar .internal, .internal {
display: none;
}
应该可以解决这个问题。
英文:
(true confessions: I was able to peek at the actual page with the issue)
The issue here was that there was a more "specific" rule that was overriding the "internal" class rule.
There was a rule with "id" specificity:
#sidebar ul li a {
display: block;
}
and another with class specificity:
.internal {
display: none;
}
changing the second one to:
#sidebar .internal, .internal {
display: none;
}
should fix it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论