Question

我正在努力解决一个难题，除了一个重要部分之外，我总是想出来：

想象一下，如果你有5个div。一个标题和4个部分（a - d）。

每个部分都有一个打开/关闭切换我使用CSS Checkbox Hack来切换打开/关闭的值。打开时，一个部分显示其中的内容，按钮切换为“关闭”单击该按钮隐藏内容并将按钮切换回“打开”。一切正常。

作为要求的一部分：标题应该以语法正确的形式不断显示哪些部分是开放的：

“所有部分都已关闭”

“A部分已开启”

“section s A和C打开”＆lt; - 复数在这里很重要。

我主要是一个javascript人，这在javascript中会是一个微不足道的问题。问题是？必须是纯CSS。为什么？因为这是要求。我怀疑我实际上正在测试我是否能找到解决问题所需的资源。我说这是因为它是一个javascript开发位置 - 奇怪的是他们会在纯CSS上测试我，而且它是一个100％的远程位置。当我以前工作远程时，80％的工作是谷歌搜索，所以我在这里。 ;）

我假设解决方案涉及滥用内容：属性以及css 计数器甚至多个，但到目前为止，我感到茫然如何做到这一点。

允许任何标记，以及任何CSS，但没有javascript。还必须是跨浏览器兼容的，但我会很满意它开始使用它。

有人能指出我正确的方向吗？

TIA。

编辑：到目前为止我的代码：

input[type='checkbox'] {
  visibility: hidden;
}
label:after {
  color: blue;
  text-decoration: underline;
  display: inline;
  position: absolute;
  right: 10px;
  content: 'open';
}
#sectionA:checked ~ label:after {
  content: 'close';
}
.section {
  border: 1px solid black;
  border-radius: 4px;
  margin: 1% auto;
  position: relative;
  line-height: 35px;
  padding-left: 5px;
  width: 100%;
}
.header {
  background-color: #ddd;
}
.sectionName {
  color: #ffa500;
  font-style: italic;
  display: inline;
}
.sectionContent {
  max-height: 0;
  display: none;
  transition: all .4s;
}
#sectionA:checked + .sectionContent {
  max-height: 30px;
  display: block;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
#siblings {
  color: #333;
}
#siblings,
h2 ~ div {
  color: red;
}

<div class="section header">
  <span id="headerMessage">all sections are closed</span>
</div>
<div class="section closed clearfix">
  section <span class="sectionName">a</span>
  <label for="sectionA" id="labelA"></label>
  <input type=checkbox id="sectionA" />
  <div class="sectionContent">section <span class="sectionName">a</span> content</div>
</div>
<div class="section closed clearfix">
  section <span class="sectionName">b</span>
  <label for="sectionB"></label>
  <input type=checkbox id="sectionB" />
  <div class="sectionContent">section <span class="sectionName">b</span> content</div>
</div>
<div class="section closed">
  section <span class="sectionName">c</span>
</div>
<div class="section closed">
  section <span class="sectionName">d</span>
</div>

我没有添加b-d部分的类，因此它们还没有工作，但它们的行为与a部分相同。

Answer 1

如果打开的标签列表位于HTML代码的最底部（因此位于标签下方），则可以，但仅。如果是，那么逐个处理所有情况就是一件简单的事情。我在以下代码中已经这样做了：

＆＃13;

/* Hide everything to start with */
.tab,
#T0,
#T1,
.plural,
.t {
  display: none;
}

/* Show the correct tab when needed */
#a:checked ~ #tab1,
#b:checked ~ #tab2,
#c:checked ~ #tab3,
#d:checked ~ #tab4 {
  display: block;
}

/* When nothing is checked, show #T0, otherwise, show #T1 */
#a:not(:checked) + #b:not(:checked) + #c:not(:checked) + #d:not(:checked) ~ #count #T0,
:checked ~ #count #T1 {
   display: inline;
}

/* Check if the message should be plural or singular */
:checked ~ :checked ~ #count .plural {
  display: inline;
}
:checked ~ :checked ~ #count .singular {
  display: none;
}

#a:checked ~ #count .taba,
#b:checked ~ #count .tabb,
#c:checked ~ #count .tabc,
#d:checked ~ #count .tabd {
  display: inline;
}

/* Show the required tabs,
   with proper comma and 'and' placement
*/
/* if ? and d are open, we need 'and' */
:checked ~ #d:checked ~ #count .andcd,
/* if ? and c are open but d is not, we need 'and' */
:checked ~ #c:checked ~ #d:not(:checked) ~ #count .andbc,
/* if a and b are open but c and d are not, we need 'and' */
#a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #count .andab,
/* if a, b and ? are open, we need a comma */
#a:checked ~ #b:checked ~ :checked ~ #count .comab,
/* if ?, c and d are open, we need a comma */
:checked ~ #c:checked ~ #d:checked ~ #count .combc {
  display: inline;
}

/* make the counter appear as if it is at the very top of the page,
   even though it is not.
*/
/* Make room at the top, and force absolute positions to be relative
   to #container*/
#container {
  position: relative;
  padding-top: 2em;
}
/* move tab-counter to the top */
#count {
  position:absolute;
  top: 0;
}

＆＃13;

  <div id="container">
    <input id="a" type="checkbox"/>
    <input id="b" type="checkbox"/>
    <input id="c" type="checkbox"/>
    <input id="d" type="checkbox"/>
    <div id="tab1" class="tab t1"><label for="a">Tab1</label></div>
    <div id="tab2" class="tab t2"><label for="a">Tab2</label></div>
    <div id="tab3" class="tab t3"><label for="a">Tab3</label></div>
    <div id="tab4" class="tab t4"><label for="a">Tab4</label></div>
    <br/>
    <div id="count">
      <span id="T0">None of the tabs are open</span>
      <span id="T1">
        Tab<span class="plural">s</span>
        <!--tab listing-->
        <span class="t taba">a</span><!--
        --><span class="t comab">, </span><!--
        --><span class="t andab"> and </span><!--
        --><span class="t tabb">b</span><!--
        --><span class="t combc">, </span><!--
        --><span class="t andbc"> and </span><!--
        --><span class="t tabc">c</span><!--
        --><span class="t andcd"> and </span><!--
        --><span class="t tabd">d</span><!--
        -->
        <span class="singular">is</span>
        <span class="plural">are</span>
        opened.
      </span>
    </div>
  </div>

＆＃13;

我尝试使用正确的语法尽可能高效，只需在需要时切换逗号和和 span，并尽可能提高效率它。我已经测试了所有16个场景，这对每个场景都有效。

就代码效率而言，我认为底部display:inline样式的条件数量与制表符的数量成线性关系，并且interpunction-span的数量也与制表符的数量呈线性关系。这意味着这是效率低下的代码（与脚本相比），但仍然没有像我最初想的那样呈指数级。

修改：作为对您发布JSFiddle的回应，这是不可能的。您根本无法访问CSS中的父元素或前兄弟元素。您必须将标题放在文档的最底部。如果你想要，你可以搞乱绝对定位。有关详细信息，请参阅我的更新代码。

PS：这几乎感觉像是一个代码高尔夫问题，所以如果这不是一个合法的问题，它仍然是http://codegolf.stackexchange.com的一个非常好的挑战。< / p>

如何只在CSS中存储“状态”？

1 个答案: