0

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

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

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

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

<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");
    });
});

链接：工作演示/网站 在此先感谢您。

4

1 回答 1

2

这是因为您正在使用 选择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;
}

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

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

以这种方式丢失了动画，但随后您可以使用 CSS3 过渡将其重新添加。

编辑：如果高度不固定，过渡高度很棘手。可以通过 transitioning 来完成max-height，但是当 collapsed 时，可能会有延迟。您可以使用这些值来获得效果很好的东西。这是我想出的：jsfiddle.net/FsVPn

于 2013-01-24T23:27:57.380 回答