У меня есть тег "label" внутри тега "summary". При нажатии на ярлык детали не открываются. Как решить?

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>