<；部门>；部分仅通过单击html/css来触发显示/隐藏内容

：） 几天前我开始创建一个网站，我被困在这一步：

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

<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>

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

.parent_风格

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

.child_风格

更简单的是，我想制作一个class=“parent\u style”作为显示/隐藏class=“child\u style”的显示/隐藏触发器 问题是，我不知道如何仅通过CSS/HTML单击创建此操作，我只知道通过悬停

HTML:

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

<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>

什么
内容
内容2

内容3

还有别的吗
内容
内容2

内容3

其他的东西2
内容
内容2

内容3

---

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

如果可以使用自定义html和css，我相信如果不允许添加到页眉，可以在页面底部粘贴自定义脚本（请记住，此脚本要求先加载页面）

因为元素在单独的div中没有成对出现，所以javascript有点长，但并不太复杂。我创建的这个脚本将扫描页面上的所有div，并允许onclick函数确定接下来的三个div。这意味着脚本是针对导航布局定制的，因此您需要通过布局更改来更改javascript

下面是一个正在工作的JSFIDLE：

var divs=document.getElementsByTagName（“div”）；
var parents=document.getElementsByClassName（“父样式”）；
对于（var i=0；i，您可以使用复选框（持久）或焦点（临时）将状态添加到CSS和HTML：


HTML

持久性来自复选框的
：checked
状态。您可以使用
切换复选框，这样您就不必知道它在那里

暂时性来自按钮的
：active
状态。也许你可以使用普通链接，但这可能会保持焦点和/或活动状态。
不可能只有css和html就有onclick触发器。你需要包含javascript或jquery。我很惊讶我的网站主机不允许我使用自定义js。：/试试。你能用js发布解决方案吗？类似这样的东西？你可以重做任何HTML吗，比如把子样式的div嵌套在父样式的div中？如果可以的话，我可以用JQuery找到一个解决方案。你好，谢谢。这是一个很棒的解决方案。但是我还有一个问题，有没有办法将hidden设置为默认值？@t4dohx是的，你知道吗在孩子的css中设置此项。
display:none；
或整行
。孩子样式{display:none；background:rgba（0,0,0,0.5）；width:325px；height:auto；}
非常感谢！这是我想要的：）solvedHmm，很抱歉让人恼火，但有办法保持。在悬停孩子样式时家长样式悬停了吗？您好，谢谢你的回答。但是这个在我的网站上不起作用，我不知道为什么。使用webnode.One up是因为这对我来说是一个很棒的新代码，但它在IE中似乎不起作用，因为除了函数之外，它还使用了一个按钮。当我将按钮更改为跨度时，它确实起作用，但对于ie8及以下版本则不起作用。伙计，ie8及以下版本？=）是的，它不适用于任何地方。我只测试了铬。可能有更好的变体。在我看来，这是一个很酷的概念。我不知道为什么，但这个解决方案对我不起作用。（使用最新版本的Chrome）。它在JSFIDLE中工作正常，但在我的网站中工作不正常：/确保元素的顺序和树正确。按钮必须位于要显示/隐藏的元素的前面和旁边，而不是在容器中。CSS依赖于同级选择器
+
或
~
。
input,
ul {
    display: none;
}

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