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

Question

我已经检查了这个问题。没有答案，这个问题也没有。但我的问题在这里略有不同。我只是在 中添加另一个元素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>