Question

我正在使用.slideUp（）和.slideToggle根据单选按钮集合中选择的值显示和隐藏两个div。

它在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，chrome和safari中实际发生的事情）是paypal单选按钮最初被检查并显示paypal div，当选择银行单选按钮时，paypal div向上滑动并且银行div下滑（反之亦然）。

在Internet Explorer中发生的事情是，最初选择了paypal按钮，并显示了paypal div，但是当我选择银行单选按钮时，没有任何反应，那么当我点击返回paypal按钮时，paypal div向上滑动，银行div向下滑动，从那里我得到相反的div显示选择的内容。

为什么Internet Explorer会向其他主浏览器产生不同的结果？

非常感谢任何想法。

Answer 1

好的，我设法通过将所有幻灯片调用更改为.slideToggle（）;

来对其进行排序

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

Answer 2

我认为这是因为IE没有在单选按钮上注册Change事件，直到AFTER焦点离开它为止。（即，当您单击Paypal按钮时，然后它会注册Bank选项的更改事件，因为它失去了焦点）。

由于此行为差异，人们通常会使用Click事件而非Change for复选框/单选按钮。

Internet Explorer中的jQuery .slideUp（）.slideToggle（）产生预期的反向效果

2 个答案: