javascript - 如何在一页上为多个项目设置 slideToggle？

Question

我在使用此代码时遇到问题.. http://jsfiddle.net/whitewiz/z4fpx/

HTML

<h1 id="flip">Title<h1>
        <div id="panel">
            <p>Description that slides down</p>
        </div>

    <h1 id="flip">Title<h1>
        <div id="panel">
            <p>description that DOESN'T slide down</p>
        </div>

JavaScript

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });   
});

和CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

它们适用于第一次描述，但不适用于其余部分。当我按下“标题”但只有第一个有效时，我有大约 18 个应该向下滑动的 #panels。你能找到 javascript 中允许多次切换的缺失部分吗？

示例 -> http://jsfiddle.net/whitewiz/z4fpx/

Answer 1

第一个有效，因为它是 DOM 中具有该 ID 的第一个元素。通常，将相同的 id 分配给多个元素是不好的做法。相反，使用类，如下所示:

HTML:

<h1 class="flip">Title<h1>
<div class="panel">
    <p>Description that slides down</p>
</div>

<h1 class="flip">Title<h1>
<div class="panel">
    <p>description that DOESN'T slide down (but does now)</p>
</div>

CSS:

.panel,.flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
.panel
{
    padding:50px;
    display:none;
}

我假设您只想展开您点击的标题后面的面板，在这种情况下，您需要获取最近的元素，其类名称为“panel”，跟在被点击的“flip”之后。

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

工作示例:http://jsfiddle.net/BBQJy/