1

我有一个脚本，我在网上某处找到了基于单选按钮点击显示或隐藏 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/

谢谢大家的帮助，加油

4

3 回答 3

3

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

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

于 2012-05-01T02:48:15.360 回答
1

试试这个方法：http: //jsfiddle.net/JEbFq/20/

于 2012-05-01T02:55:05.853 回答
1

你可以这样做：

// 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/

或者，您可以创建一个带有 show/hide 参数的 slideToggleOption jQuery 方法，并像这样使用它：

// 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/

于 2012-05-01T02:58:19.410 回答