0

このjqueryの例を実装しようとしました: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

ただし、1 つの div でのみ機能します。他の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>
4

1 に答える 1

3

試す

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

jsFiddle の例

于 2012-08-31T18:32:16.503 に答える