2012-12-07 5 views
0

Во-первых, я смущенно спрашиваю об этом, поэтому многие люди уже задали этот вопрос, но даже после того, как прошли столько сообщений, я не могу достичь того, чего хочу. В принципе, div, изначально скрытый, должен отображаться нажатием кнопки.jquery show скрыто div

Я попытался скрытие DIV с помощью display:none и hide(), а затем отображать его с помощью show(), toggle() и css("display","block"). Используя всевозможные комбинации вышеизложенного, я все еще не смог получить результат.

Код:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<link href="css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" /> 
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="jQuery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#one').hide(); 
     $('#Button1').click(function() { 
      $('#one').toggle(500); 
     });   
    }); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="one" style="height: 20px;width:200px; background-color: Red; ">  
</div> 
<asp:Button ID="Button1" runat="server" Text="Show" /> 
</form> 
</body> 
</html> 

На кнопке мыши, то DIV отображается в течение коротких секунд, прежде чем он снова исчезает.

То же самое происходит, если я использую show() вместо toggle() в вышеуказанном коде.

Опять то же самое, если я изложу style="display:none" в DIV вместо того, чтобы использовать hide(), а затем использовать show() или toggle().

Я также пробовал использовать $('#one').css("display","block");, но опять же, тот же результат.

Может кто-нибудь скажет мне, где я ошибаюсь. Просто начал изучать jQuery, и это действительно расстраивает, когда что-то, по-видимому, так просто, не будет работать.

Заранее спасибо. :)

ответ

2

Поскольку вы используете кнопку с типом button, как asp:Button оказанной в браузере, имеющих type="submit", поэтому используйте return false; в

$(document).ready(function() { 
     $('#one').hide(); 
     $('#Button1').click(function() { 
      $('#one').toggle(500); 
      return false; 
     });   
    }); 
1

Вы отправляете форму и страница перезагружается, тип по умолчанию кнопки элемента отправить, вы можете попробовать использовать preventDefault метод объекта события или установить атрибут типа кнопки для button.

$(document).ready(function() { 
    $('#one').hide(); 
    $('#Button1').click(function(e) { 
     e.preventDefault(); 
     $('#one').toggle(500); 
    });   
});