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

问题描述 投票：0回答：2

我正在努力解决一个难题，除了一个重要部分外，我已经解决了大部分问题：

想象一下，如果您需要 5 个 div。一个标题和 4 个部分 (a - d)。

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

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

“所有路段均已关闭”

“A区已开放”

“部分s A 和 C 已开放” <-- the plural is important here.

我主要是一个 javascript 人，这在 javascript 中是一个小问题。问题是？必须是纯CSS。为什么？因为这就是要求。我怀疑我实际上正在接受测试，看看我是否能找到解决问题所需的资源。我这么说是因为这是一个 javascript 开发职位 - 很奇怪他们会在纯 CSS 上测试我，而且这是一个 100% 远程职位。当我以前远程工作时，80% 的工作都是谷歌搜索或 SO，所以我就在这里。 ;)

我假设解决方案涉及滥用 content: 属性以及 css counter 甚至多个属性，但到目前为止，我不知道如何做到这一点。

允许使用任何标记和任何 CSS，但不允许使用 javascript。还必须是跨浏览器兼容的，但我会对它在 ONE 上开始工作感到满意。

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

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 部分相同。

html css dom css-selectors
2个回答
5
投票

这是可能的，但仅如果打开的选项卡列表位于 HTML 代码的最底部（因此位于选项卡下方）。如果是的话，那就很简单了，把所有的情况都一一处理掉。我已经在以下代码中做到了这一点：

/* 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;
}
  <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>

我尝试通过在需要时简单地切换逗号和和

span
来尽可能高效地使用正确的语法，并且尽可能高效地使用它。我已经测试了所有 16 个场景，这对于每个场景都可以正常工作。

就代码效率而言，我认为底部

display:inline
样式的条件数量与选项卡数量呈线性关系，并且插点跨度的数量也与选项卡数量呈线性关系。这意味着这是低效的代码（与脚本相比），但仍然不像我最初想象的那样呈指数增长。

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

PS：这几乎感觉像是一个代码高尔夫问题，所以如果这不是一个合法的问题，那么它仍然是 http://codegolf.stackexchange.com.

上的一个非常好的挑战
0
投票

有时你实际上会在堆栈中找到大师。干得好！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.