複数のスライドパネル

Question

私は同じページ内に複数のjQuerysliding panelを持っています私はショーや1つのパネルを非表示にしたときに、しかし、他の人も同様に表示または非表示になります。 誰でもこの問題を解決できますか？おかげさまで

code: 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".flip").click(function(){ 
    $(".panel").slideToggle("slow"); 
    }); 
}); 
</script> 
<h3>Category: Health</h3> 
<div class="panel" > 
#{ifnot Posts} 

    No posts to view 

#{/ifnot} 

<ul> 
    #{list items:Posts, as: 'Post'} 
    <li> 

     <p>${Post.poster}</p><p>${Post.content}</p> 

    </li> 
    #{/list} 
</ul> 

    <a id="addpost" href="#">add new Health's post</a> 

</div> 
<p value="health" class="flip">Show/Hide Posts</p> 
<h3>Category: Politics</h3> 
<div class="panel"> 
#{ifnot Posts} 

    No posts to view 

#{/ifnot} 
<ul> 
    #{list items:Posts, as: 'Post'} 
    <li> 

     <p>${Post.poster}:</p><p>${Post.content}</p> 

    </li> 
    #{/list} 
</ul> 
<p> 
    <a id="addpost" href="#">add new Politic's post</a> 



</p> 
</div> 
<p id="health" class="flip">Show/Hide Posts</p> 
<h3>Category: Entertainment</h3> 
<div class="panel"> 
#{ifnot Posts} 

    No posts to view 

#{/ifnot} 
<ul> 
    #{list items:Posts, as: 'Post'} 
    <li> 

     <p>${Post.poster}</p><p>${Post.content}</p> 

    </li> 
    #{/list} 
</ul> 
<p> 
    <a id="addpost" href="#">add new Entertainment's post</a> 
</p> 
</div> 
<p id="entertainment" class="flip">Show/Hide Posts</p> 

Answer 1

セレクタは、それに一致するすべての要素に関数を適用します。例えば

$(".panel").slideToggle("slow"); 

ようなセレクタは、パネルクラスを持っているすべての要素にマッチします。

簡単な解決策は、あなたが操作したいパネルを識別するためのIDを使用することです。

<div id="panel1" class="panel"> .. </div> 
<div id="panel2" class="panel"> .. </div> 
<div id="panel3" class="panel"> .. </div> 

そしてjqueryのセレクタアドレスに、このパネルは、明示的に

$("#panel1").slideToggle("slow");