Javascript 为什么show/hide div在firefox中工作而在google chrome中不工作？

以下是相关的HTML代码：

<select>
    <option id="show">Traditional class</option>
    <option id="hide">Online class</option>
</select>
<div id="paypal">
    <ul class="checkbox-grid">
        <li>
            <input type="checkbox" name="text1" value="value1" style="margin-left: 10px;" />
            <label>All</label>
        </li>
        <li>
            <input type="checkbox" name="text2" value="value2" style="margin-left: 10px;" />
            <label>Mon</label>
        </li>
        <li>
            <input type="checkbox" name="text3" value="value3" style="margin-left: 10px;" />
            <label for="text3">Tue</label>
        </li>
        <li>
            <input type="checkbox" name="text4" value="value4" style="margin-left: 10px;" />
            <label for="text4">Wed</label>
        </li>
        <li>
            <input type="checkbox" name="text5" value="value5" style="margin-left: 10px;" />
            <label for="text5">Thu</label>
        </li>
        <li>
            <input type="checkbox" name="text6" value="value6" style="margin-left: 10px;" />
            <label for="text6">Fri</label>
        </li>
        <li>
            <input type="checkbox" name="text7" value="value7" style="margin-left: 10px;" />
            <label for="text7">Sat</label>
        </li>
        <li>
            <input type="checkbox" name="text8" value="value8" style="margin-left: 10px;" />
            <label for="text8">Sun</label>
        </li>
    </ul>
    <br>
    <table style="width:100%">
        <tr>
            <td>
                <select>
                    <option>hr</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>min</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>am</option>
                    <option>pm</option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>hr</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>min</option>
                    <option></option>
                    <option></option>
                </select>
            </td>
            <td>
                <select>
                    <option>am</option>
                    <option>pm</option>
                    <option></option>
                </select>
            </td>
        </tr>
    </table>
</div>

传统班级
在线课程


全部的


周一


星期二


结婚


清华大学


星期五


坐


太阳




人力资源
闵
是
下午
人力资源
闵
是
下午

隐藏/显示div的相应jQuery代码（即

）如下所示：

<script>
    $(document).ready(function() {
        $("#show").click(function() {
            // $("#paypal").removeAttr("style");
            $("#paypal").show();
        });
    }); 
    <script> 
    $(document).ready(function() {
        $("#hide").click(function() {
            //$("#paypal").attr("style","display:none");
            $("#paypal").hide();
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#显示”）。单击（函数（）{
//$（“#贝宝”）.removeAttr（“风格”）；
$（“#贝宝”）.show（）；
});
}); 
$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
//$（“#贝宝”）.attr（“样式”，“显示：无”）；
$（“#贝宝”）.hide（）；
});
});

上述隐藏/显示功能在Mozilla firefox中运行良好，但在Google Chrome中却无法实现。它总是显示

为什么会这样？ 请帮帮我

谢谢。

<script>
$(document).ready(function(){
  $("#show").click(function(){
  // $("#paypal").removeAttr("style");
     $("#paypal").show();
  });
  $("#hide").click(function(){
    //$("#paypal").attr("style","display:none");
    $("#paypal").hide();
  });
});
</script>

$（文档）.ready（函数（）{
$（“#显示”）。单击（函数（）{
//$（“#贝宝”）.removeAttr（“风格”）；
$（“#贝宝”）.show（）；
});
$（“#隐藏”）。单击（函数（）{
//$（“#贝宝”）.attr（“样式”，“显示：无”）；
$（“#贝宝”）.hide（）；
});
});

您不需要两个脚本标记，也不需要对

ready

<script>
$(document).ready(function(){
  $("#show").click(function(){
   // $("#paypal").removeAttr("style");
   $("#paypal").show();
  });

  $("#hide").click(function(){
    //$("#paypal").attr("style","display:none");
    $("#paypal").hide();
  });
});
</script>

$（文档）.ready（函数（）{
$（“#显示”）。单击（函数（）{
//$（“#贝宝”）.removeAttr（“风格”）；
$（“#贝宝”）.show（）；
});
$（“#隐藏”）。单击（函数（）{
//$（“#贝宝”）.attr（“样式”，“显示：无”）；
$（“#贝宝”）.hide（）；
});
});

使用此代码

简短回答： 使用

更改

事件而不是

单击

。（请记住jsbin添加了

$（文档）。准备好了

自动添加，您需要自己添加）

长答覆： 这里有一个例子。假设您有以下html用于选择：

<select id="selection">
    <option value="show">Traditional class</option>
   <option value="hide">Online class</option>
</select>

希望获得此帮助

这是因为选项没有单击事件，因此您需要使用select的更改事件

$(document).ready(function () {
    $("select").change(function () {
        $('#paypal').toggle(); // if you only have 2 options use toggle
    });
});

如果有更多选项，可以检查所选选项的ID

$(document).ready(function () {
    $("select").change(function () {
        this[this.options.selectedIndex].id === 'show' ? $('#paypal').show() : $('#paypal').hide();
    });
});

---

我认为您应该首先更改HTML：

<select id="display-paypal">
   <option value="show" >Traditional class</option>
   <option value="hide" >Online class</option>
</select>

传统班级
在线课程

然后，您将修改javascript，如下所示：

<script>
$(document).ready(function(){
  $("#display-paypal").change(function(){  
     if(this.val() == 'show') {
         $("#paypal").show();
     } else {
        $("#paypal").hide();
     }
  });
});
</script>

$（文档）.ready（函数（）{
$（“#显示贝宝”）.change（函数（）{
if（this.val（）=='show'）{
$（“#贝宝”）.show（）；
}否则{
$（“#贝宝”）.hide（）；
}
});
});

这可能会有帮助！。通过对代码的一些更改签出此fiddle链接

---

我怀疑为什么它能在mozilla中工作，而不能在chrome中工作，可能是因为代码中使用了未对齐的脚本标记。此外，您正在收听单击select的特定选项，这听起来不太合适

为

选择
元素使用选择器，并使用它的
。更改
jquery函数

<select id="vshow">
    <option id="show">Traditional class</option>
    <option id="hide">Online class</option>
</select>

这是一把工作小提琴。
我创建了一个简短的代码片段。
不过，toggle现在需要一个额外的迁移文件，但可以处理它

只需在单击事件中创建两个函数-

function(){
$('#paypal').show();
},
function(){
$('#paypal').hide();
}

所以它-

 $(function(){
     $('button').toggle(
            function(){
            $('#paypal').hide();
            },
            function(){
            $('#paypal').show();
       });
    });

的行为是这样的-

 $(function(){
     $('button').toggle(
            function(){
            $('#paypal').hide();
            },
            function(){
            $('#paypal').show();
       });
    });

关闭第一个
标签或删除第二个。
不触发点击事件可能需要为
选择
元素添加额外的选择器（id或类），如果页面中有多个
选择
元素。
function(){
$('#paypal').show();
},
function(){
$('#paypal').hide();
}

 $(function(){
     $('button').toggle(
            function(){
            $('#paypal').hide();
            },
            function(){
            $('#paypal').show();
       });
    });