Question

如何使用.toggle切换两个div我到目前为止有以下内容：

$('#toggler').change(function() {
    $('#div1').toggle();
    $('#div2').toggle();
});

toggler是一个checkbutton - 我希望div 1出现在true时，div 2会消失，而相反的情况发生在false，任何想法？

编辑** - 我无法使用.hide（），就好像我选中了选中的复选框启动页面一样，切换方式将是错误的

Answer 1

您可以在toggle（）

中放置一个布尔值

var isChecked = $('#toggler').is(':checked');

$('#toggler').change(function() {
    $('#div1').toggle(isChecked);
    $('#div2').toggle(!isChecked);
});

jQuery文档 -

$( "#foo" ).toggle( showOrHide );

相当于 -

if ( showOrHide === true ) {
    $( "#foo" ).show();
} else if ( showOrHide === false ) {
    $( "#foo" ).hide();
}

Answer 2

试试这个小提琴： http://jsfiddle.net/sWJ9u/1/

$(document).ready(function () {
    $('#toggler').change(function () {
        var input = $(this);
        var div = input.is(':checked') ? $('#div1') : $('#div2');
        $('div').hide();
        div.show();
       });
});

使用.toggle（）切换一个div和另一个div

2 个答案: