0

假设我有一个带有下拉菜单的表单。下拉菜单有两个选项。如果用户选择第二个选项，则以前不可见的三个附加字段将变为可见。这就是使用 jQuery 实现它的方式：

$(document).ready(function() {
    $('#my_dropdown').change(function() {
        if ($(this).val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
    });
});

这种方法的问题是，当页面第一次加载并且下拉菜单默认选择了第一个选项时，用户可能会看到三个字段向上滑动，这可能看起来很刺耳。所以这是做同样事情的另一种方法，但没有我刚才描述的问题：

function dropdown_handler(animate) {
    if (animate == true) {
        if ($('#my_dropdown').val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
    }
    else {
        if ($('#my_dropdown').val() == 'option2') {
            $('#foo, #bar, #baz').show();
        }
        else {
            $('#foo, #bar, #baz').hide();
        }
    }
}

$(document).ready(function() {
    dropdown_handler(false);

    $('#my_dropdown').change(function() {
        dropdown_handler(true);
    });
});

但是，这种方法的问题在于它看起来相当臃肿。如何有效地解决这个问题？

4

1 回答 1

1

您可以在页面加载时触发更改

 $('#my_dropdown').change(function() {
         if ($(this).val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
 }).change();

你还需要在你的 CSS 中设置它的样式 .. 这可以确保在页面第一次加载时这些元素是隐藏的..

#foo, #bar, #baz 
{
   display: none;
}
于 2012-10-01T22:14:25.507 回答