我在 "summary" 标签内有一个 "label" 标签。单击标签时不会打开详细信息。怎么解决？

Question

我也检查了 this question. There is no answer and 问题。但我的问题在这里没有什么不同。我只是在 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>

我在 "summary" 标签内有一个 "label" 标签。单击标签时不会打开详细信息。怎么解决？

I have a "label" tag inside a "summary" tag. It is not opening the details when clicked on label. How to solve?

html

details-tag

summary-tag