如何根據復選框切換點擊打開一個div？

Question

我創建了一個引導開關，開關底部有一個 div，所以當開關打開時，我希望 div 顯示，當它關閉時，我希望 div 隱藏。 我找到了一些只顯示復選框的解決方案。

我該怎么做？

例如，如果選中了 switch 復選框，那么我需要顯示 div 的內容，否則隱藏 div。

 .tags-list-group { margin-bottom: 50px; }.tags-list-group.switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; }.tags-list-group.switch input { display: none; }.tags-list-group.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.tags-list-group.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }.tags-list-group input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }.tags-list-group.slider.round { border-radius: 34px; }.tags-list-group.slider.round:before { border-radius: 50%; }.tags-list-group input.success:checked +.slider { background-color: #8bc34a; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script> <div class="tags-list-group"> <div class="tags-group-card"> <!-- Default panel contents --> <ul class="list-group list-group-flush"> <li class="list-group-item custom-list-group-item"> User Defined <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> <div class="list-group-item show-content"> <p>Content 1(hide div)</p> </div> </div>

Answer 1

這對於 jquery 來說非常簡單。 查看以下示例

 $(document).ready(() => { $("#content").hide(); $("#chkbox").click((e) => { if ($("#chkbox").is(":checked")) { $("#content").show(); } else { $("#content").hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="" id="chkbox" /> <div id="content"> <p>Hidden Content</p> </div>

Answer 2

您可以在 slider 上附加 .click( ) ，然后使用.toggle()顯示/隱藏元素，這是一個工作片段：

 $(document).ready(function(){ $('.show-content').hide(); $('.slider').click(function(e) { $('.show-content').toggle(); }) })

 .tags-list-group { margin-bottom: 50px; }.tags-list-group.switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; }.tags-list-group.switch input { display: none; }.tags-list-group.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.tags-list-group.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }.tags-list-group input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }.tags-list-group.slider.round { border-radius: 34px; }.tags-list-group.slider.round:before { border-radius: 50%; }.tags-list-group input.success:checked +.slider { background-color: #8bc34a; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script> <div class="tags-list-group"> <div class="tags-group-card"> <!-- Default panel contents --> <ul class="list-group list-group-flush"> <li class="list-group-item custom-list-group-item"> User Defined <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> <div class="list-group-item show-content"> <p>Content 1(hide div)</p> </div> </div>

Answer 3

使用 JQuery 您可以實現以下目標：

 $('.show-content').hide() // Init with hidden.show-content $('input.success').change(function() { if (this.checked) { $('.show-content').show() } else { $('.show-content').hide() } });

 .tags-list-group { margin-bottom: 50px; }.tags-list-group.switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; }.tags-list-group.switch input { display: none; }.tags-list-group.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.tags-list-group.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }.tags-list-group input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }.tags-list-group.slider.round { border-radius: 34px; }.tags-list-group.slider.round:before { border-radius: 50%; }.tags-list-group input.success:checked+.slider { background-color: #8bc34a; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.bundle.min.js"></script> <div class="tags-list-group"> <div class="tags-group-card"> <!-- Default panel contents --> <ul class="list-group list-group-flush"> <li class="list-group-item custom-list-group-item"> User Defined <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> <div class="list-group-item show-content"> <p>Content 1(hide div)</p> </div> </div>

它使用 function、 .show() 、.hide( )和change事件。

Answer 4

根據您的代碼，這就是您想要的。 但是，在我看來，您可以通過使用 Bootstrap 的折疊組件並將您的開關嵌入其中來擁有一個更整潔的組件。

 $("#myCustomCheckbox").change(function(){ // in case the switch is on if(this.checked) { $("#myDivOfContent").addClass("content-area--show"); // in case switch is off }else{ $("#myDivOfContent").removeClass("content-area--show"); } });

 /*** begin::div of content styles ****/.content-area { height: 0; width: 100%; overflow: hidden; transition: height.3s ease-in-out; }.content-area p { padding: 20px; }.content-area--show { height: 70px; border: 1px solid #ccc; border-top: 0; }.switch { margin-bottom: 0; } /*** end::div of content styles ****/.tags-list-group { margin-bottom: 50px; }.tags-list-group.switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; }.tags-list-group.switch input { display: none; }.tags-list-group.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.tags-list-group.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }.tags-list-group input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }.tags-list-group.slider.round { border-radius: 34px; }.tags-list-group.slider.round:before { border-radius: 50%; }.tags-list-group input.success:checked +.slider { background-color: #8bc34a; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script> <div class="tags-list-group"> <div class="tags-group-card"> <!-- Default panel contents --> <ul class="list-group list-group-flush"> <li class="list-group-item custom-list-group-item "> User Defined <label class="switch"> <input type="checkbox" class="success" id="myCustomCheckbox"> <span class="slider round"></span> </label> </li> </ul> </div> <div class="content-area" id="myDivOfContent"> <p>Content 1(hide div)</p> </div> </div>

Answer 5

使用prop來檢查this ：

 $(function() { $('.success').change(function() { if ($(this).prop('checked')) { $(".show-content").show(); } else { $(".show-content").hide(); } }) });

 .tags-list-group { margin-bottom: 50px; }.tags-list-group.switch { position: relative; display: inline-block; width: 60px; height: 34px; float: right; }.tags-list-group.switch input { display: none; }.tags-list-group.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.tags-list-group.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }.tags-list-group input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }.tags-list-group.slider.round { border-radius: 34px; }.tags-list-group.slider.round:before { border-radius: 50%; }.tags-list-group input.success:checked+.slider { background-color: #8bc34a; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div class="tags-list-group"> <div class="tags-group-card"> <:-- Default panel contents --> <ul class="list-group list-group-flush"> <li class="list-group-item custom-list-group-item"> User Defined <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> <div class="list-group-item show-content" style="display;none;"> <p>Content 1(hide div)</p> </div> </div>