javascript-如何在一个页面上有多个条目的slideToggle？

我在使用此代码时遇到问题..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个应该滑下来的面板.请问您能在javascript中找到缺少的片段以允许多次切换吗？

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

解决方法:

第一个起作用是因为这是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/

标签：slide,slidetoggle,javascript
来源： https://codeday.me/bug/20191030/1971109.html