2009-09-07 52 views
1

我正在使用.slideUp()和.slideToggle來顯示和隱藏兩個div,其基於在單選按鈕集合中選擇的值。jQuery .slideUp().slideToggle()在Internet Explorer中產生預期結果的反向效果

它可以在Firefox,Safari和Chrome中正常工作,但Internet Explorer產生的反向效果超出了我的預期。

這裏是我的Javascript

function TogglePaypal() { 
     $("#bank").slideUp(250, function() { 
      $("#paypal").slideToggle(); 
     }); 
    } 
    function ToggleBank() { 
     $("#paypal").slideUp(250, function() { 
      $("#bank").slideToggle(); 
     }); 
    } 

這裏是我在我的HTML正在做的,

<%=Html.RadioButton("PaymentMethod", "PayPal", true, new { onchange = "TogglePaypal();" })%> 

<label class="payment-radio">PayPal</label> 

<%=Html.RadioButton("PaymentMethod", "Bank Account", false, new { onchange = "ToggleBank();" })%> 

<label class="payment-radio">Bank Account</label> 

<div id='paypal'></div> 
<div id='bank' style="display: none"> </div> 

我所期待(什麼是在Firefox INFACT發生,Chrome和Safari)是最初檢查貝寶單選按鈕,並顯示貝寶div,當銀行單選按鈕被選中時,貝寶div上滑,銀行div滑落(反之亦然)。

在Internet Explorer中發生的事情是,最初選擇貝寶按鈕,並顯示貝寶div,但是當我選擇銀行單選按鈕時,什麼也沒有發生,那麼當我點擊回貝寶按鈕時,貝寶div滑落,銀行下滑,從那裏我得到相反的div顯示什麼選擇。

爲什麼Internet Explorer會爲其他主要瀏覽器產生不同的結果?

任何想法將不勝感激。

回答

1

好吧,我設法通過改變我所有的幻燈片調用到.slideToggle();

function ToggleBank() { 
     $("#paypal").slideToggle(); 
     $("#bank").slideToggle(); 
    } 
+1

您是否測試過瘋狂觸發切換(即多次點擊等),因爲之前切換時遇到過很多麻煩,無法跟上屏幕上的輸入。我試圖在我想要展示/隱藏時明確表示,這是更多的代碼,但更可靠一些...... – daddywoodland 2009-09-07 09:10:58

0

我認爲這是因爲IE沒有在單選按鈕上註冊Change事件,直到AFTER焦點離開它爲止。 (即,當您點擊PayPal按鈕時,那麼它會註冊Bank選項的更改事件,因爲它失去了焦點)。

由於這種行爲差異,通常人們將使用Click事件而不是Change作爲複選框/單選按鈕。