在復選框狀態上切換元素類

Question

隱藏的類應該基於是否選中復選框來切換。 其中一個下拉菜單應該隱藏，另一個顯示。

也許我的三元運算符設置不正確。

提前致謝。

 function toggleButton() { var toggler = $("input[name='toggler']").prop('checked'); var awardOptions = $('#awardOptions'); var yearOptions = $('#yearOptions'); var awardShow = awardOptions.removeClass('hidden'); var yearShow = yearOptions.removeClass('hidden'); var awardHide = awardOptions.addClass('hidden'); var yearHide = yearOptions.addClass('hidden'); console.log(toggler); return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow); } $('#toggler').on('click', function(){ toggleButton(); }); 

 .hidden { display: none !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggleWrapper"> <input type="checkbox" class="dn" name="toggler" id="toggler" checked/> <label for="toggler" class="toggle"> <span class="toggle__handler"></span> </label> </div> <div class="inputBox" id="filter"> <div class="dropdown hidden" id="yearOptions"> <select id="hof-year"> <option value="0">Choose a Year</option> <option value="2016">2016</option> </select> </div> <div class="dropdown" id="awardOptions"> <select id="hof-accomp"> <option value="0">Choose an Award</option> </select> </div> </div> 

這是我用來觸發toggleButton函數的函數。

$('#toggler').on('click', function(){
   toggleButton();
});

Answer 1

你可以使用var awardShow = awardOptions.toggleClass('hidden'); 而不是使用addClass或removeClass 。

  $('#toggler').on('click', function(){ $('#awardOptions, #yearOptions').toggleClass('hidden'); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggleWrapper"> <input type="checkbox" class="dn" name="toggler" id="toggler" checked/> <label for="toggler" class="toggle"> <span class="toggle__handler"></span> </label> </div> <div class="inputBox" id="filter"> <div class="dropdown hidden" id="yearOptions"> <select id="hof-year"> <option value="0">Choose a Year</option> <option value="2016">2016</option> </select> </div> <div class="dropdown" id="awardOptions"> <select id="hof-accomp"> <option value="0">Choose an Award</option> </select> </div> </div>