다중 선택을 위해 드롭다운 목록 안에 확인란을 만드는 방법은 무엇입니까?
- Susan Sarandon원래의
- 2024-11-30 03:45:11342검색
드롭다운 목록 안에 확인란 만들기
다중 선택 드롭다운 목록을 만들 때 목표는 사용자가 목록에서 여러 옵션을 선택할 수 있도록 하는 것입니다. 드롭다운 메뉴.
이 문제를 해결하고 여러 옵션을 선택할 수 있도록 하려면 보다 정교한 접근 방식이 필요합니다. 다음은 드롭다운 내의 각 옵션에 대한 확인란을 생성하는 솔루션입니다.
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
};
<div>
이 접근 방식은 CSS와 JavaScript를 활용하여 드롭다운 내에 표시되는 기능 체크리스트를 생성합니다. "과일 선택" 앵커를 클릭하면 사용자는 옵션 목록을 표시하거나 숨길 수 있으며 확인란을 사용하여 여러 과일을 선택할 수 있습니다.
위 내용은 다중 선택을 위해 드롭다운 목록 안에 확인란을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.