Проблемы селектора Jquery - PullRequest
Новая
       4

Проблемы селектора Jquery

1 голос
/ 23 января 2011

В основном я пытаюсь заставить #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>

Ответы [ 3 ]

1 голос
/ 23 января 2011

Дайте обработчику клика $(document).ready(... перенос, и он должен работать: 

$(document).ready(function() {

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

});
0 голосов
/ 23 января 2011

Измените ваш код следующим образом: 

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

Проблема в том, что javascript загружается и выполняется до загрузки элемента toggle_box.Он работает для документа body, так как загружается перед javascript.

0 голосов
/ 23 января 2011

Может быть потому, что DOM еще не готов?Попробуйте обернуть ваш скрипт в следующий фрагмент кода: 

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

Это короткий код для $(document).ready(function(){ ...}); и может быть просто то, чего не хватает?

...