我怎样才能使标签的特定部分可点击？

Question

我正在做一个项目，我有一个带有输入复选框和标签的手风琴列表。问题是，当我点击标签时，标签会变大，显示里面的内容，但是当我点击内容时，标签会检查输入，隐藏标签内的内容，所以，我的想法是，只有一部分标签 (4em)，可以点击以激活输入复选框，其余只能点击其中的对象，而不会激活输入复选框。

为了更好的想法，这是我的代码：

<input id="season1" type="checkbox">
<label class="ls1" for="season1">
    <h3 class="first">Season 1</h3>
    <i class="fas fa-angle-right"></i>
    <div class="episodes1-grid">
    </div>
</label>

input[type="checkbox"] {
    display: none;
}

label {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 4em;
    transition: height 0.8s ease-in-out;
}

也许这甚至不需要使用 javascript，这首先是我使用标签的问题。

Answer 1

您可以在您的标签上使用 pointer-events: none，并在您希望可点击的元素上重新设置它：

input[type="checkbox"] {
  display: none;
}

label {
  display: flex;
  flex-direction: column;
  pointer-events: none;
  position: relative;
  cursor: pointer;
  height: 4em;
  transition: height 0.8s ease-in-out;
}

label h3 {
  pointer-events: auto;
}

input[type="checkbox"]:checked~label {
  color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<input id="season1" type="checkbox" />
<label class="ls1" for="season1">
    <h3 class="first">Season 1</h3>
    <i class="fas fa-angle-right"></i>
    <div class="episodes1-grid">
    </div>
</label>

根据您的情况，使用原生 HTML <details> 元素可能更好：

h3 {
  margin-block: .3em;
}

summary {
  cursor: pointer;
}

<details>
  <summary>
    <h3 class="first">Season 1</h3>
  </summary>
  <article class="episodes1-grid">
    Episodes1-grid content
  </article>
</details>