Question

我有一个脚本，我在网上找到了根据单选按钮点击显示或隐藏div的脚本。

我试图通过在转换中添加fadeToggle（）或slideToggle（）来改善这一点。但是，当我这样做时，该功能不像以前那样工作。当我点击另一个单选按钮时，它会显示两个div并再次隐藏它们。

// Show/Hide forms based on radio button selection
$('input[name="screen_type"]').bind('change',function(){
var showOrHide = ($(this).val() == 2) ? true : false;
$('.welcome_screen').toggle(showOrHide);
    var showOrHide = ($(this).val() == 1) ? true : false;
$('.training_screen').toggle(showOrHide);
});

请看这里的小提琴 http://jsfiddle.net/clintongreen/JEbFq/

感谢所有帮助人员，欢呼声

Answer 1

fadeToggle和slideToggle不要让参数显示或隐藏api doc

这是一种快速而又肮脏的方式：http://jsfiddle.net/hzSnU/1/

Answer 2

尝试此方法：http://jsfiddle.net/JEbFq/20/

Answer 3

你可以这样做：

// Hide lis
    $(".training_screen").hide();
    $(".welcome_screen").hide();    

// Show/Hide forms based on radio button selection
    $('input[name="screen_type"]').bind('change',function(){
        var fnTraining, fnWelcome;
        if ($(this).val() == 1) {
            fnTraining = "slideDown";
            fnWelcome = "slideUp";
        } else {
            fnTraining = "slideUp";
            fnWelcome = "slideDown";
        }
        $('.welcome_screen')[fnWelcome]();
        $('.training_screen')[fnTraining]();
 });

工作演示：http://jsfiddle.net/jfriend00/4aSbG/

或者，你可以创建一个slideToggleOption jQuery方法，它接受show / hide参数并像这样使用它：

// Hide lis
    $(".training_screen").hide();
    $(".welcome_screen").hide();    

jQuery.fn.slideToggleOption = function(show /* other optional args from slideToggle */) {
    var args = Array.prototype.slice.call(arguments, 1);
    if (show) {
        return(this.slideDown.apply(this, args));
    } else {
        return(this.slideUp.apply(this, args));
    }
};

// Show/Hide forms based on radio button selection
    $('input[name="screen_type"]').bind('change',function(){
        var showWelcome = ($(this).val() == 1);
        $('.welcome_screen').slideToggleOption(showWelcome);
        $('.training_screen').slideToggleOption(!showWelcome);
 });

工作演示：http://jsfiddle.net/jfriend00/Lqeqe/

jQuery改进show / hide脚本以包含fadeToggle

3 个答案: