html - 部分仅通过单击 html/css 触发显示/隐藏内容

Question

:)几天前我开始制作一个网站，但我卡在了这一步: http://jsfiddle.net/r6uhczks/

CSS:

  /* This section to be trigger of dropdown process */
.parent_style { background: -webkit-linear-gradient(left,rgba(0,0,0,0.5),transparent); width: 325px; height: 21px; }
.parent_style:hover { background: -webkit-linear-gradient(left,rgba(242,182,0,0.7),transparent); }
.parent_style .textP {}
.parent_style:hover .textP {color: red;}

/* This section to be shown by clicking on ↑ and hidden by clicking for second time */
.child_style { background: rgba(0, 0, 0, 0.5); width: 325px; height; auto; }
.child_style:hover { background: rgba(242,182,0,0.7);}
.child_style .textC {color: white;}
.child_style:hover .textC {color: black;}

如你所见，我为下拉菜单创建了两种样式，

.parent_style

定义显示/隐藏内容的触发器

.child_style

更简单，我想制作一个 class="parent_style" 来显示/隐藏显示/隐藏 class="child_style"问题是我不知道如何通过单击仅使用 CSS/HTML 创建此操作，我只知道悬停。

HTML:

<div class="parent_style">
    <p class="textP">Something</p>
</div>
<div class="child_style">
    <p class="textC">Content</p>
</div>
    <div class="child_style">
    <p class="textC">Content2</p>
</div>
    <div class="child_style">
    <p class="textC">Content3</p>
</div>
<div class="parent_style">
    <p class="textP">Something else</p>
</div>
<div class="child_style">
    <p class="textC">Content</p>
</div>
    <div class="child_style">
    <p class="textC">Content2</p>
</div>
    <div class="child_style">
    <p class="textC">Content3</p>
</div>
<div class="parent_style">
    <p class="textP">Something else 2</p>
</div>
<div class="child_style">
    <p class="textC">Content</p>
</div>
    <div class="child_style">
    <p class="textC">Content2</p>
</div>
    <div class="child_style">
    <p class="textC">Content3</p>
</div>
<br>

编辑:我也想知道如何编辑这些元素之间的空格，最好删除它们。

Answer 1

您可以使用复选框(持久)或焦点(临时)向 CSS 和 HTML 添加状态:

http://jsfiddle.net/rudiedirkx/L40zcjfc/

HTML

<button>hold down here</button>
<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>

<br />
<br />

<button><label for="cb1">click here</label></button>
<input id="cb1" type="checkbox" />
<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>

CSS

input,
ul {
    display: none;
}

button:active + ul,
input:checked + ul {
    display: block;
}

持久化来自复选框的:checked状态。您可以使用 <label> 切换复选框所以您不必知道它在那里。

临时性来自:active按钮的状态。也许您可以使用普通链接，但这可能会保持焦点和/或事件。