我在“摘要”标签中有一个“标签”标签。单击标签时不会打开详细信息。怎么解决？

Question

我已经检查了this 的问题。没有答案，this 也有问题。但我的问题在这里略有不同。我只是在summary 中添加另一个元素，然后单击它不会打开details。当我在label 外部单击时，即仅在summary 上有效。

这是我的代码：

<form action="#" id="">
        <details>
            <summary>
                <label>Filter 1</label>
            </summary>
            <div class="filter-1">
                <input type="checkbox" name="filter-1" value="a">A <br>
                <input type="checkbox" name="filter-1" value="b">B
            </div>
        </details>
    </form>

我基本上是想在details - summary 标签中显示或隐藏一些输入。

注意：- 类和名称属性就在那里。没有代码。

预期的解决方案：

点击摘要标签内的任何内容将打开详细信息。 提前致谢

Answer 1

label 元素阻止点击summary。将pointer-events: none; 添加到标签或您放入summary 中的任何元素。

label {
  pointer-events: none;
}

<form action="#" id="">
  <details>
    <summary>
      <label>Filter 1</label>
    </summary>
    <div class="filter-1">
      <input type="checkbox" name="filter-1" value="a">A <br>
      <input type="checkbox" name="filter-1" value="b">B
    </div>
  </details>
</form>