3

Im having problems with this code to work.. 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");
  });   
});

and CSS

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

They work for first description, but doesn't work for the rest. I have about 18 #panels that should slide down, when I press on "Title" but only the first works.. Could you please find the missing piece in javascript that doenst allow multiple toggle?

Example on -> http://jsfiddle.net/whitewiz/z4fpx/

4

2 回答 2

4

第一个有效，因为这是 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;
}

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

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

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

于 2013-05-25T16:51:30.133 回答
0

最初的问题似乎缺少适当的结束标签，尼罗河的回答中重复了一个错误。因此，它不适用于原始海报。

基于 Anna Brila 更新的 jsfiddle ( http://jsfiddle.net/whitewiz/WuNHz/2 )，可能的正确解决方案是：

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

这是基于使用类而不是 ids 的。

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

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

于 2016-07-06T05:48:13.523 回答