在复选框状态上切换元素类

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>