Question

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

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

Answer 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");
  });
});

Answer 2

你需要在div之外切换按钮才能切换它。
您需要为div div

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

2 个答案: