[英]How can I make only a certain part of a label clickable?
I'm working on a project and I have an accordion list with input checkbox and labels.我正在做一个项目,我有一个带有输入复选框和标签的手风琴列表。 The problem is, the label makes larger when I click it, revealing the content inside it, but when I click the content, the label checks the input, hiding the content inside the label, so, my idea was that only a certain part of the label (4em), can be clickable to activate the input checkbox, and the rest was only clickable for the objects inside it, without activating the input checkbox.
问题是,当我点击它时,label变大,显示里面的内容,但是当我点击内容时,label检查输入,隐藏label里面的内容,所以,我的想法是,只有一部分label (4em) 可以点击以激活输入复选框,rest 只能点击其中的对象,而不会激活输入复选框。
For a better idea here's my code:为了更好的主意,这是我的代码:
<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;
}
Maybe this doesn't even require the use of javascript and it's my problem in the use of a label in the first place.也许这甚至不需要使用 javascript,这是我首先使用 label 的问题。
pointer-events: none
on your label, and reset it on the elements you want clickable: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>
<details>
element:<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.