Question

我不希望用所有新闻充斥我的访问者显示，所以我想为每个新闻使用扩展器。但我想支持禁用JavaScript的游客。我的尝试：

#news > .panel > .panel-heading > .panel-title > .label{
   float: right;
}

#news > .panel > .panel-body {
    display: none;
}

#news > .panel > panel-heading > panel-title > a:visited < .panel-title < .panel-heading <         .panel > .panel-body {
   display: block;
}


        <div id="news" class="tab-pane active">
                {% for announcement in server.announcements.all %}
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><a href="#">{{ announcement.title }} </a><span class="label label-default">By {{ announcement.writer.get_username }} at {{ announcement.date_created }}</span></h3>
                        </div>
                        <div class="panel-body">

                            {{ announcement.content|safe_html }}
                        </div>
                    </div>
                {% endfor %}
        </div>

Answer 1

您需要进行一些更改

首先，你永远不会（使用当前的CSS3能力）能够使用:visited psuedo-class使用纯CSS获得你想要的东西，原因有两个：（1）a元素不是在.panel-body的兄弟级别，因此无法通过css控制.panel-body，以及（2）:visited伪类对设计者控制的内容有严格的限制（{ {3}}）。

那你能做什么？请改用:target。

但这会（1）限制您只允许一次打开一个新闻项目，并且（2）要求您在id元素上设置.panel-body属性以匹配{{1控制它的href标签。所以你需要像这样的html结构：

每个<div id="news" class="tab-pane active"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <a href="#Item1">Title 1</a> <span class="label label-default">By writer name</span> </h3> </div> <div class="panel-body" id="Item1"> Panel 1 body </div> </div> </div>都有一个独特的a，与项目href的{{1}}相关联。然后，您可以获得与此CSS所需的功能类似的显示功能：

id

您可以在for privacy reasons中查看其工作原理，并了解它如何与多个新闻项一起使用，请查看this fiddle example。

此解决方案仅兼容CSS3，因此禁用javascript的旧版浏览器将无法看到任何新闻项（使用javascript可以使用该扩展程序）

Answer 2

优雅退化：
我会在内容滚动条（高度受限）的容器中显示所有新闻，如下所示： http://jsfiddle.net/Py2HU/1/

当JS可用时会添加一个显示/隐藏按钮，隐藏N最后一条新闻并在点击后显示/隐藏它们（或添加上一个/下一个按钮以允许逐个滚动新闻）

<强> CSS

.news-wrapper {
    width: 300px;
    max-height: 400px;
    overflow: auto;
    border: 1px solid #000;
}

<强> HTML

<div class="news-wrapper">
    <ul class="news">
        <li class="news-item">Lorem ipsum </li>
        <li class="news-item">Lorem ipsum </li>
        <li class="news-item">Lorem ipsum </li>
        <li class="news-item">Lorem ipsum </li>
    </ul>
</div>

兼容性：IE7 +轻松使用IE6（如果有人关心的话，就像.ie6 .news-wrapper { height: 400px }一样简单）

Answer 3

这个答案适用于那些只使用CSS3寻找Single扩展器的人。 Bootstrap参考仅用于使用Glyph-icons（向上/向下）。 check Plunker

<强> HTML

 <div class="expandercheckbox">
  <input id="e1" type="checkbox" checked="checked" />
  <label for="e1" class="expanderheader">Click me to Expand/Collpase</label>
  <div class="expandercontainer">
  I am in container. I am visible. Click above to make be collpase.
  </div>
</div>

<强> CSS

 body{
 padding:50px;
 background: #484848;
 color:#fff;
}
.expandercheckbox input[type="checkbox"] { 
 display: none;
 }
.expandercheckbox .expanderheader {
 cursor: pointer;
 }
.expandercheckbox input[type="checkbox"] + .expanderheader {
 color: #fff;
 font-weight: bold;
 font-size: 12px;
 white-space: nowrap;
 user-select:none;
-webkit-user-select:none;
}
.expandercheckbox input[type="checkbox"] + .expanderheader:before {
  content: "\e113";
  display: inline-block;
  font: 14px/1em Glyphicons Halflings;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  margin: -2px 0.25em 0 0;
  padding: 1.5px 3.5px;
  vertical-align: top;
  background: #717171;
  /* Old browsers */
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:before {
  content: "\e114";
  padding: 2.5px;
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:after {
  font-weight: bold;
  color:#000;
}
.expandercontainer{
background:#000;
 padding:15px;
}
.expandercheckbox input[type="checkbox"]:checked ~ .expandercontainer {
  display: block;
 }
.expandercheckbox input[type="checkbox"]:not(:checked) ~ .expandercontainer {
  display: none;
 }

CSS扩展器只有CSS

3 个答案:

您需要进行一些更改