2010-12-15 5 views
0
<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".ex .hide").click(function(){ 
    $(this).parents(".ex").hide("slow"); 
    }); 
}); 
</script> 
<style type="text/css"> 
div.ex 
{ 
background-color:#e5eecc; 
padding:7px; 
border:solid 1px #c3c3c3; 
} 
</style> 
</head> 
<body> 

<h3>Island Trading</h3> 
<div class="ex"> 
<button class="hide">Hide me</button> 
<p>Contact: Helen Bennett<br /> 
Garden House Crowther Way<br /> 
London</p> 
</div> 

<h3>Paris spécialités</h3> 
<div class="ex"> 
<button class="hide">Hide me</button> 
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br /> 
Paris</p> 
</div> 

<h3>Paris spécialités</h3> 
<div class="ex"> 
<button class="hide">Hide me</button> 
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br /> 
Paris</p> 
</div> 

<h3>Paris spécialités</h3> 
<div class="ex"> 
<button class="hide">Hide me</button> 
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br /> 
Paris</p> 
</div> 

<h3>Paris spécialités</h3> 
<div class="ex"> 
<button class="hide">Hide me</button> 
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br /> 
Paris</p> 
</div> 

<h3>Paris spécialités</h3> 
<div class="ex"> 
<button class="hide">Hide me</button> 
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br /> 
Paris</p> 
</div> 

</body> 
</html> 

私がしようとしているのは、非表示ボタンをトグルボタンに置​​き換えることです。ので、私はボタンを押すたびに私は情報を表示または非表示にすることができます。それはどうやって?このコードの非表示ボタンをトグルに置き換えるにはどうすればよいですか?

答えて

1

ボタンが現時点で非表示になっているため、再度表示することはできません。

ボタンを削除し、ヘッダーをクリックして他の情報を切り替えるとどうなりますか?

同様:

$(document).ready(function(){ 
    $("h3").click(function(){ 
    $(this).next("div").toggle("slow"); 
    }); 
}); 

...またはあなたがボタンを維持し、その直後<p>要素を切り替えることができます:

$(document).ready(function(){ 
    $(".ex .hide").click(function(){ 
    $(this).next("p").toggle("slow"); 
    }); 
}); 
+0

私はこれで仕事ができる良いがあなたのために別々のIDを持っている必要があります – NoOne

0
  • あなたはdivのその外側のボタンを持っている必要がありますそれとトグルするためにトグルします。 D Uに感謝:
  • あなたはdiv要素の