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中缺少的部分，允许多次切换？

示例 - ＆gt;的 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;
}

我假设您只想在您单击的标题后面展开面板，在这种情况下，您需要使用类名＆＃34; panel＆＃34;来获取最接近的元素。跟随＆＃34;翻转＆＃34;被点击了。

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

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

Answer 2

最初的问题似乎是缺少正确的结束标签，这个错误在尼罗河的答案中重复出现。因此，它对原始海报不起作用。

根据Anna Brila更新的jsfiddle（http://jsfiddle.net/whitewiz/WuNHz/2），可能的正确解决方案是：

  $(".flip").click(function(){
  $flip = $(this);
    $content = $flip.next();
    $content.slideToggle();
  });

这取决于使用类而不是ID。

完整的工作示例：http://jsfiddle.net/wy8gq1bj/1

注意：在示例中，我更改的唯一HTML是在第三个之后立即删除<br>，这使得最后一个项目不会展开和折叠。

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

2 个答案: