为什么 show/hide div 在 firefox 中有效，但在 google chrome 中无效？

Question

相关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>

对应jQuery到hide/showdiv（即<div id="paypal">）的代码如下：

<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>

hide/show 的上述功能在 Mozilla firefox 中运行完美，但在 Google Chrome 中运行不佳。它总是显示 <div id="paypal">.

为什么会这样？请帮助我。

谢谢。

Answer 1

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

您不需要两个脚本标签，也不需要对 ready.

的两次单独调用

Answer 2

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

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

使用此代码

Answer 3

简答：使用 change 事件而不是 click。 Check this out。（请记住jsbin会自动添加$(document).ready，需要自己添加）

长答案：这是一个例子。假设你有这个 html 作为 select:

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

那么，你只需要这个：

$(document).ready(function() {
    $("#selection").change(function(){
      if($("#selection").val() == "show"){
        $("#paypal").show();
      }
      else if($("#selection").val() == "hide"){
        $("#paypal").hide();
      }
    });
});

希望对您有所帮助

Answer 4

因为option没有click事件所以需要用select的change事件

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

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

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

Answer 5

我认为你应该先改变你的 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>

Answer 6

这可能会有所帮助！请检查此 fiddle link 并对您的代码进行一些更改。

http://jsfiddle.net/bpe54j5a/

$(document).ready(function(){
$('#sel').change(function(){
    if(event.srcElement.value== 'Traditional class'){
        $("#paypal").show();
    }
    else{
        $("#paypal").hide();        
    }

});

});

我怀疑为什么它在 mozilla 中有效但在 chrome 中无效的原因可能是因为您的代码中使用了未对齐的 script 标记。此外，您正在收听单击 select 的特定选项，这听起来不合适。

Answer 7

为 select 元素使用选择器并使用它的 .change jquery 函数。

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

修改你的jQuery如下

$(document).ready(function(){
  $("#vshow").change(function(){
   $("#paypal").toggle();
  });
});

这是一个工作 fiddle http://jsfiddle.net/bxjo3wns/.

Answer 8

我创建了一个简短的代码片段。但是toggle现在需要一个额外的migrate文件，但是可以处理它。

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

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

原来如此-

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

这样的行为-

http://jsfiddle.net/stackmanoz/3n586z1r/

为什么 show/hide div 在 firefox 中有效，但在 google chrome 中无效？

Why the show/hide div is working in firefox but not in google chrome?

html

javascript

css

jquery

show-hide