如何防止扩展/显示从隐藏/折叠

Question

如何防止内容折叠/隐藏当我点击内容1或2

.details,
.show,
.hide:target {
display: none;
color: black;
}
.hide:target+.show,
.hide:target~.details {
display: block;
color: black;
}

<a id="hide1" href="#hide1" class="hide">+ Content</a>
<a id="show1" href="#show1" class="show">- Content</a>
<div class="details">
<ul>
<li><a href="#Content1">Content1</a></li>
<li><a href="#Content2">Content2</a></li>
</ul>
</div>

Answer 1

.hide {
cursor: pointer;
}
.hide::before {
content: '+ Content';
display: block;
}
.hide::after {
content: '- Content';
display: none;
}
.details  {
display: none;
transition:all 0.4s linear;
}
input:checked ~ .details,
input:checked + .hide::after {
display: block;
}
input:checked + .hide::before {
display: none;
}

<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle" class="hide"></label>
<div class="details">
<ul>
<li><a href="#Content1">Content1</a></li>
<li><a href="#Content2">Content2</a></li>
</ul>
</div>

Answer 2

锚标记重新加载页面，因此主div正在崩溃。

<li><a href="javascript:void(0)">Content1</a></li>
<li><a href="javascript:void(0)">Content2</a></li>

或者如果你仍然想使用href，那么在点击时返回false，这将阻止它重新加载页面。

<li><a href="#Content1" onclick="return false;">Content1</a></li>
<li><a href="#Content2" onclick="return false;">Content2</a></li>

Answer 3

target的问题是，当用户点击其他内容时，它会从内容+/-中消失。

要记住内容"+"或"-"是否已被单击，您可以使用复选框。

如果你把+/-内容变成标签而不是div，那么它们可以与复选框相关联(使用for=)，并且你可以隐藏实际的复选框。

#showhide {
position: absolute;
opacity: 0;
}
#showhide~#show {
display: block;
}
#showhide:checked~#show {
display: none;
}
#showhide~#hide {
display: none;
}
#showhide:checked~#hide {
display: block;
}
#showhide~.details {
display: none;
}
#showhide:checked~.details {
display: block;
}

<input id="showhide" type="checkbox">
<label for="showhide" id="show">+ Content</label>
<label for="showhide" id="hide">- Content</label>
<div class="details">
<ul>
<li><a href="#Content1">Content1</a></li>
<li><a href="#Content2">Content2</a></li>
</ul>
</div>