jquery - HTML & jQuery - 点击打开 div

Question

我试图实现这个 jquery 示例：http ://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

但它只适用于一个 div。当我点击它们时，如何让它打开其他 div。这就是我所拥有的：

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
  });
});
</script>
<style type="text/css">
div.panel, p.flip {
margin: 0px;
padding: 5px;
text-align: center;
background: #333;
border: 1px solid #2C2C2C
}
div.panel {
display: none;
}
</style>

    <div id="content">
  <h2>Creating the scenario</h2>
  <p>sample text sample text. <br />
  </p>
  <p class="flip">[+] Code Hint #1</p>
  <div class="panel" style="line-height:1.5px;">
    <p>Some hint related to code segment</p>
  </div>
</div>
<br />
<br />
<div id="content">
  <h2>Adding the hero</h2>
  <p>sample text sample text. <br />
  </p>
  <p class="flip">[+] Code Hint #1</p>
  <div class="panel" style="line-height:1.5px;">
    <p>Some hint related to code segment</p>
  </div>
</div>
<br />
<br />
<div id="content">
  <h2>Moving with keyboard commands</h2>
  <p>sample text sample text. <br />
  </p>
  <p class="flip">[+] Code Hint #1</p>
  <div id="panel1" class="panel" style="line-height:1.5px;">
    <p>Some hint related to code segment</p>
  </div>
</div>

Answer 1

尝试

$(".flip").click(function() {
    $(this).next(".panel").slideToggle("slow");
});​

jsFiddle 示例