Question

我在同一页面中有多个jQuery sliding panel，但是当我显示或隐藏一个面板时，其他面板也会显示或隐藏。有谁能解决这个问题？感谢。

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

页面中的多个幻灯片面板

1 个答案: