我在同一个页面中有多个 jQuery
滑动面板
,但是当我显示或隐藏一个面板时,其他面板也会显示或隐藏。
谁能解决这个问题?
谢谢。
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>
最佳答案
选择器将一个函数应用于匹配它的所有元素。例如像
这样的选择器$(".panel").slideToggle("slow");
将匹配所有具有 panel 类的元素。
一个简单的解决方案是使用 id 来标识您要操作的面板。
<div id="panel1" class="panel"> .. </div>
<div id="panel2" class="panel"> .. </div>
<div id="panel3" class="panel"> .. </div>
然后在 jquery 选择器中明确使用 address this panel
$("#panel1").slideToggle("slow");
关于javascript - 页面中的多个滑动面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9627431/