使用jQuery高效地滑動或隱藏表單字段

Question

假設我有一個帶有下拉菜單的表單。下拉菜單有兩個選項。如果用戶選擇第二個選項，則以前不可見的三個附加字段變得可見。這是一個可以如何實現一個使用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); 
    }); 
}); 

這種方法的問題，雖然，是它似乎相當臃腫。如何有效解決這個問題？

Answer 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; 
}