Question

基本上我试图让#toggle_box使用Jquery向下滑动，如果我只是使用document.body作为选择器，下面的代码可以工作，但是当#toggle是选择器时它似乎不起作用！有什么想法吗？

<html>
<head>

<title>JQuery Testage</title>
<style>
#toggle_box {
 display: none;
}
#toggle {
 background-color: #FFF000;
 border: solid;
}
</style>
</head>
<body>

<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$("#toggle").click(function () {
 if ($("#toggle_box").is(":hidden")) {
 $("#toggle_box").slideDown("slow");
 } else {
 $("#toggle_box").hide();
 }
 });
</script>

<div id="toggle">Toggle</div>

<div id="toggle_box">This should silde using the Jquery library 1.4.2</div>

</body>

</html>

Answer 1

给点击处理程序一个$(document).ready(...换行，它应该可以工作：

$(document).ready(function() {

     // your click handler and anything else that
     // should run when the DOM is ready

});

Answer 2

可能是因为DOM还没有准备好吗？尝试将脚本包装在以下代码中：

$(function() {
    // your code here
});

这是$(document).ready(function(){ ...});的简短代码，可能只是缺少什么？

Answer 3

修改你的代码：

<script type="text/javascript">
$(document).ready(function() {
  $("#toggle").click(function () {
    if ($("#toggle_box").is(":hidden")) {
      $("#toggle_box").slideDown("slow");
    } else {
      $("#toggle_box").hide();
    }
  });
});
</script>

问题是在加载toggle_box元素之前加载并执行了javascript。它适用于文档body，因为在之前加载了。

Jquery选择器问题

3 个答案: