javascript - 显示/隐藏切换以及添加类

Question

我正在创建一个常见问题解答页面。

我想打开和关闭答案。我使用 jquery 进行了工作。

我还想向“打开”的选择器添加一个类(.active)。我可以将类(class)添加到父级。

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

<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