如何清除 :target 选择？

Question

我有使用:target选择器的链接。单击时，相应的段落会突出显示。问题是：一旦单击，就无法清除选择。我希望当我再次单击所选项目时取消选中它。

例如：如果链接 1 被选中并且我再次单击它，那么它就会被取消选中。

jsfiddle

body {
  background: #fefefe;  
}

:target {
   background-color: #ccff66;
}

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>

<p id="link1">This is a text A</p>
<p id="link2">This is a text B</p>
<p id="link3">This is a text C</p>
<p id="link4">This is a text D</p>

笔记

• 我在使用单选/复选框的解决方法中取得了成功，但我想知道是否可以使用:target.

• 它不是重复的：帖子上很清楚，这里的目标是通过第二次单击来取消选中某个项目，而不是单击第三个“橡皮擦”项目（该项目在当前场景中甚至不存在） ）。

Answer 1

您无法真正使用单个链接打开和关闭目标，但是（作为纯 CSS 解决方法）您可以同时使用 ashow和hide链接，并且始终仅显示其中一个：

.hide, .show, .list {
    padding: 10px;
    display:block;
    border: 1px solid #000;
}

.list,
.show,
.hide:target {
     display: none;
}

.hide:target + .show,
.hide:target ~ .list {
    display:block;
}

  <div>
    <a href="#hide" class="hide" id="hide">Show menu</a>
    <a href="#show" class="show" id="show">Hide menu</a>
    <div  id="drop" class="list">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
    </div>
</div>