0
こんにちは、私はdivを開き、トグルスイッチをクリックしてdivを閉じる問題に直面しています。クリックトグルスイッチの表示/非表示方法jqueryとcss
$('.tog').on('click', function() {
$('.cntr').show();
});.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-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: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tog">
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END-->
</div>
</label>
</div>
<div class="cntr">Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis
a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque
nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</div>
私はコードペンのリンクを削除していない – prad
を確認してくださいOPが明示*与えない限り、私たちは、* *へのアクセス許可*、他のサイトからコードをコピーしてはいけませんスニペット – prad
@ZakariaAcharkiを追加しましたそれをSO *にコピーしてください* OP *、実際に*、著作権者、または他の場所のコードのライセンスはCC BY-SA 3.0と互換性があります（例：pastebin.com、CCも使用します） BY-SA 3.0）。 SEに転記すると、CC BY-SA 3.0でライセンスされ、他のライセンスと競合する可能性があります。コードのコピーには著しい著作権問題があり、CC BY-SA 3.0のライセンス（著作権者）のもとで公開することを特に許可された人のみが行うべきです。 – Makyen