如何用切换替换此代码中的隐藏按钮?

时间:2010-12-15 02:58:10

标签: jquery hide toggle

<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>

我想要做的是用切换按钮替换隐藏按钮。所以每次按下按钮我都可以隐藏或显示信息。我是怎么做到的?

2 个答案:

答案 0 :(得分: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");
  });
});

答案 1 :(得分:0)

  • 你需要在div之外切换按钮才能切换它。
  • 您需要为div div
  • 设置单独的ID