2010-09-14 2 views
8

я пытаюсь получить JQuery, чтобы скрыть этот DIV и по какой-то причине он не работает, что я делаю неправильноJquery ПЕРЕКЛЮчЕНИЕ не работает

http://stat-me.com/jq.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#one{ 
    border:3px solid #00F; 
    width:50%; 
} 
#hideme{ 
    border:3px solid #00F; 
    width:50%; 
    display:none; 
} 
</style> 

<script type="text/javascript" src="../_root/js/jquery/jquery-1.4.2.js"></script> 

<script language="javascript" type="text/javascript"> 



$("#one").click(function() { 
$("#hideme").toggle(); 
}); 

</script> 

</head> 

<body> 

<div id="one"> 
<a href="#">hello</a> 
</div> 

<div id="hideme"> 
hi 
</div> 


</body> 
</html> 

ответ

14

Вам нужно:

  1. Использование document.ready
  2. Выберите анкер под #one div, not t он Div себя

Так оно и должно быть:

$(document).ready(function() { 
    $("#one a").click(function() { 
    $("#hideme").toggle(); 
    }); 
}); 
+1

Оба gotchas, с которыми я столкнулся с maaaany раза :) –

0

У меня такая же ситуация, при использовании Ajax и применил это решение. Напишите javascript: void (0); вместо значения «#» в href. это не позволяет вам добавить '#' в url. использование .live() при использовании в режиме ajax. в .toggle(), передать аргумент как эффект, например «Drop», «slide» и т. д., больше на http://jqueryui.com/toggle/.

$(document).ready(function(){ 
     $('#one a').live('click', function(){ 
      $('#hideme').toggle('Drop'); 
      return false; 
     }); 
    }); 

Применение return false; наконец, не позволил мне перезагрузить страницу.

Ответил только за знание.

0

Ваш не завертывает ваш javascript в $(document).ready(function(){}) и т. Д. JQuery пытается найти элемент, который еще не существует!

Смежные вопросы