HTMLElement实现分组开关效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：HTMLElement实现分组开关效果代码，类别组有个总开关，下面有子选项开关，可全选，单独选择。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
toggle-categories {
	display: block;
	
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		
		&:not(ul ul) {
			background-color: #88888830;
			/* width: fit-content; */
			margin-inline: auto;
			padding-block-end: .25rem;
		}
		
		li:not(li li) {
			margin-block-end: .5rem;
		}
		
		ul {
			margin-block: .5rem;
		}
	}
	
	label { cursor: pointer; }
	
	/* category headings */
	li:not(li li) > .toggle-input {
		background-color: #88888840;
		justify-content: space-between;
		font-weight: bold;
		
		label:not(.toggle) {
			padding-block: .25rem;
		}
		.toggle { 
			--_height: .8rem;
			--_color: light-dark(red, hotpink);
		}
		
		&:hover .toggle {
			@media (pointer: fine) {
				/* --_slider-bg: oklch(from var(--_color) 60% 60% h); */
				/* --_slider-active-bg: oklch(from var(--_color) 60% 40% h); */
				--_slider-bg: var(--_color);
				--_slider-active-bg: var(--_color);
			}
		}
		
	}
	
	.toggle-input { 
		padding: .25rem .75rem;
		display: flex;
		align-items: center;

		label {
			&:hover { cursor: pointer; }
			&:not(.toggle) { width: calc(100% - 2rem); }
			&.toggle + label { padding-inline: .5rem 0; }
			&:has(+ .toggle) { padding-inline: 0 .5rem; }
		}
		
		&:has(input:focus-visible) label:not(.toggle) { 
			outline: solid 2px var(--_color, #6666bbef);
			outline-offset: -1px; 
		}

		.toggle {
			--_color: #018259;
			/* --_color: light-dark(#018259, #014f4b); */
			--_color-active: light-dark(var(--_color), oklch(from var(--_color) 48% c h));
			--_transition: transform 0.2s ease-in-out, background-color 0.2s linear;
			--_height: 1rem;
			--_padding: calc(var(--_height) / 9); /* eg: 2px */
			--_width: calc(1.5 * (var(--_height) + var(--_padding))); /* 30px */
			--_circle: calc(var(--_height) - (2 * var(--_padding))); /* 14px */
			--_radius: calc(var(--_circle) + (2 * var(--_padding))); /* 18px */
			--_distance: calc(var(--_width) - (2 * var(--_padding)) - var(--_circle)); /* 12px */
			/* active colors */
			--_slider-active-color: light-dark(#fff, #fff);
			--_slider-active-bg: var(--_color);
			/* default colors */
			--_slider-color: light-dark(#fafafa, #ddd);
			--_slider-bg: light-dark(oklch(from var(--_color) 39% 0 h), oklch(from oklch(from var(--_color) 39% 0 h) 48% c h));

			width: var(--_width);
			height: var(--_height);
			position: relative;
			display: inline-block;

			/* hide the checkbox */
			input { opacity: 0; width: 0; height: 0; }

			/* focus state (moved to the wrapping element) */
			/* &:has(input:focus-visible) .toggle-slider { 
				outline: solid 2px var(--_color, #6666bbef);
				outline-offset: 0.1rem; 
			} */

			/* default state */
			.toggle-slider {
				position: absolute;
				inset: 0;
				background-color: var(--_slider-bg);
				border-radius: var(--_radius);
				transition: var(--_transition);
				&:before {
					position: absolute;
					content: "";
					height: var(--_circle);
					width: var(--_circle);
					left: var(--_padding);
					top: var(--_padding);
					background-color: var(--_slider-color);
					/* -webkit-transition: var(--_transition); */
					transition: var(--_transition);
					border-radius: 50%;
				}
			}

			/* checked state */
			input:checked + .toggle-slider {
				background-color: var(--_slider-active-bg);
				&:before {
					transform: translateX(var(--_distance));
					background-color: var(--_slider-active-color);
				}
			}

			/* intermediate state */
			input.only-some-active + .toggle-slider {
				/* background-color: var(--_slider-bg); */
				&:before {
					transform: translateX(calc(var(--_distance) * .5));
					border-radius: 3px;
					height: calc(var(--_circle) / 6);
					margin-top: calc(var(--_padding) * 3);
				}
			}

		}
	}
	
	li li .toggle-input {
		&:hover .toggle {
			@media (pointer: fine) {
				/* --_slider-bg: okl.........完整代码请登录后点击上方下载按钮下载查看