2
JS가 붙어 있습니다. 나는 처음에 2 개의 버튼과 "onClick"기능을 가지고 있었지만 지금은 이것을 토글로 "업그레이드"하고 싶습니다. 이 JS에서는 비디오 표시/숨기기 기능과 스위치 슬라이드가 작동하지 않습니다. 스위치가 선택되었을 때 비디오를 표시하고 싶습니다.표시 및 숨기기 <iframe> 토글을 사용하여 ": checked"
JS가 나를 도와 줄 수 있습니까?
function showVideo(){
$("#video").hide();
$("#cb1").click(function() {
if($(this).is(":checked")) {
$("#video").show(300);
} else {
$("#video").hide(200);
}
});
}.tgl {
display: none;
}
.tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.tgl + .tgl-btn:after {
left: 0;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:onClick + .tgl-btn:after {
left: 50%;
}
.tgl-light + .tgl-btn {
background: #f0f0f0;
border-radius: 2em;
padding: 2px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.tgl-light + .tgl-btn:after {
border-radius: 50%;
background: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn {
background: #9FD6AE;
}<input class="tgl tgl-light" id="cb1" type="checkbox"/>
<label class="tgl-btn" for="cb1"></label>
<iframe id="video" style='width:360px; height: 190px; border: none' src="https://www.youtube.com/embed/owsfdh4gxyc"></iframe>