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

Question

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

为了更好的主意，这是我的代码：

<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，这是我首先使用 label 的问题。

Answer 1

您可以在 label 上使用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>