토글 스위치 슬라이더를 전환 할 때 다른 div 요소를 표시합니다.

Question

토글 스위치가 있어야 슬라이드가 왼쪽으로 이동하면 div 콘텐츠 구성 요소가 튀어 나오고 슬라이드 오른쪽에는 다른 div 콘텐츠 팝업이 표시됩니다. 어떻게 진행할 수 있습니까?

HTML 콘텐츠

<form> 
    <label class="switch"> 
     <input type="checkbox" checked="true" /> 
     <div class="slider round"></div> 
    </label> 
</form> 

<div id ="menu1"> 
    Menu 1 content 
</div> 
<div id ="menu2"> 
    Menu 2 content 
</div> 

CSS의 콘텐츠는 토글 DIV id="menu1"의 권리 내용을 슬라이드하면 표시 및 슬라이드 왼쪽 내용에 할 수처럼 내가 원하는 볼 수 있듯이

/* The switch - the box around the slider */ 
.switch { 
    position: relative; 
    display: inline-block; 
    width: 60px; 
    height: 34px; 
} 

/* Hide default HTML checkbox */ 
.switch input {display:none;} 

/* The slider */ 
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 26px; 
    width: 26px; 
    left: 4px; 
    bottom: 4px; 
    background-color: white; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 

input:checked + .slider { 
    background-color: #2196F3; 
} 

input:focus + .slider { 
    box-shadow: 0 0 1px #2196F3; 
} 

input:checked + .slider:before { 
    -webkit-transform: translateX(26px); 
    -ms-transform: translateX(26px); 
    transform: translateX(26px); 
} 

/* Rounded sliders */ 
.slider.round { 
    border-radius: 34px; 
} 

.slider.round:before { 
    border-radius: 50%; 
} 

div id="menu2"을 표시 할 수 있습니다. 슬라이드에서 div 콘텐츠 구성 요소가 튀어 나오면 오른쪽으로 슬라이드가 전환되는 토글 스위치가 있어야합니다. 팝업 팝업. 어떻게 진행할 수 있습니까?

Answer 1

이렇게해야하지만 jQuery가 필요합니다. 기본적으로 CSS로 #menu2을 display:none;으로 숨기고 JS를 .show 또는 .hide까지 각각 사용합니다. 질문이 있으면 알려주세요.

$(function() { 
 
    $("#toggle").click(function() { 
 
    if ($(this).is(":checked")) { 
 
     $("#menu1").show(); 
 
     $("#menu2").hide(); 
 
    } else { 
 
     $("#menu1").hide(); 
 
     $("#menu2").show(); 
 
    } 
 
    }); 
 
});

/* The switch - the box around the slider */ 
 

 
.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 60px; 
 
    height: 34px; 
 
} 
 

 

 
/* Hide default HTML checkbox */ 
 

 
.switch input { 
 
    display: none; 
 
} 
 

 

 
/* The slider */ 
 

 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ccc; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
.slider:before { 
 
    position: absolute; 
 
    content: ""; 
 
    height: 26px; 
 
    width: 26px; 
 
    left: 4px; 
 
    bottom: 4px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
input:checked+.slider { 
 
    background-color: #2196F3; 
 
} 
 

 
input:focus+.slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked+.slider:before { 
 
    -webkit-transform: translateX(26px); 
 
    -ms-transform: translateX(26px); 
 
    transform: translateX(26px); 
 
} 
 

 

 
/* Rounded sliders */ 
 

 
.slider.round { 
 
    border-radius: 34px; 
 
} 
 

 
.slider.round:before { 
 
    border-radius: 50%; 
 
} 
 

 
#menu2 { 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label class="switch"> 
 
     <input type="checkbox" id="toggle" checked="true" /> 
 
     <div class="slider round"></div> 
 
    </label> 
 
</form> 
 

 
<div id="menu1"> 
 
    Menu 1 content 
 
</div> 
 
<div id="menu2"> 
 
    Menu 2 content 
 
</div>

Answer 2

당신은 필요한 기능을 구현하기 위해 자바 스크립트를 사용할 수 있습니다.

먼저 확인란을 고유하게 식별하려면 id을 정의하십시오. HTML을 다음으로 대체하십시오. 체크 박스에 id="checkbox1"을 추가했습니다.

<form> 
    <label class="switch"> 
    <input type="checkbox" id="checkbox1" checked="true" > 
    <div class="slider round"></div> 
    </label> 
</form> 

<div id ="menu1"> 
    Menu 1 conetnt 
</div> 
<div id ="menu2"> 
    MEnu 2 content 
</div> 

다음 JavaScript 코드를 추가해야합니다. 체크 박스는 기본적으로 checked이므로 처음에는 menu2이 숨겨집니다. 아래 코드는 처음에 menu2을 숨긴 다음 확인란 값이 변경 될 때마다 menu1과 menu2 사이를 전환합니다.

var checkbox1 = document.getElementById('checkbox1'); 
var menu1 = document.getElementById('menu1'); 
var menu2 = document.getElementById('menu2'); 

menu2.style.display = 'none'; 

checkbox1.onchange = function() { 
    if (checkbox1.checked) { 
    menu1.style.display = 'block'; 
    menu2.style.display = 'none'; 
    } else { 
    menu2.style.display = 'block'; 
    menu1.style.display = 'none'; 

    } 
};