只有 CSS 的 CSS 扩展器

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 功能下）能够使用纯 CSS 使用 :visited psuedo-class 获得所需的内容，原因有两个：（1）a 元素不在同级级别.panel-body 的一部分，因此它不能通过 css 控制 .panel-body，并且 (2) :visited 伪类对它允许设计者控制的内容有严格的限制 (for privacy reasons)。

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

但这将 (1) 限制您一次只允许打开一个新闻项目，并且 (2) 要求您在 .panel-body 元素上设置 id 属性以匹配 @987654333 的 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，它与项目的.panel-body 的id 相关联。然后，您可以通过此 CSS 获得与您所寻求的功能相似的功能：

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

您可以在 this fiddle example 中了解它是如何工作的，要了解它如何处理多个新闻项目，请查看 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 寻找单一扩展器的人。 引导参考仅用于使用字形图标（上/下）。 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;
 }