Question

我正在创建一个FAQ页面。

我想打开和关闭答案。我有使用jquery工作。

我还想将一个类（.active）添加到“open”的选择器中。我可以将该类添加到父级。

我的问题是：我需要使用未填充的元素，因为最终用户不会理解添加类。它需要是非样式的块元素。所以它看起来像这样：

<h3 class="active">Activator</h3>
  <p>show</p>
<h3>Activator</h3>
  <p>hide</p>
<h3>Activator</h3>
  <p>hide</p>
etc...

当脚本将类.active添加到单击的h3时，它会将类.active添加到所有h3标记。

这是我的代码：

$(document).ready(function() {
    $('.content p').hide();
    $('h3').click(function(){
        $(this).next("p").toggle(250);
    });
    $(".content h3").click(function(){
        $(".content h3").toggleClass("active");
    });
});

链接：working demo/site 先感谢您。

Answer 1

这是因为您使用click选择$(".content h3")处理程序中的所有元素。相反，您需要引用this来获取被单击的元素：

$(document).ready(function() {
    $('.content p').hide();
    $('h3').click(function(){
        $(this).next("p").toggle(250);
    });
    $(".content h3").click(function(){
        $(this).toggleClass("active");
    });
});

编辑：一个很好的诀窍就是设置你的CSS：

.content p
{
    display: none;
}
.content h3.active + p
{
    display: block;
}

通过使用相邻的兄弟组合器（+），您可以根据<p>是否处于活动状态来控制<h3>的显示。然后，您可以简化JavaScript：

$(document).ready(function() {
    $(".content h3").click(function() {
        $(this).toggleClass("active");
    });
});

你以这种方式丢失动画，但随后你可以用CSS3过渡将其添加回来。

编辑：如果高度不固定，过渡高度很棘手。它可以通过转换max-height来完成，但是当折叠时，可能会有延迟。您可以使用这些值来获得非常好的效果。以下是我提出的问题：jsfiddle.net/FsVPn

显示/隐藏切换和添加类

1 个答案: