Jquery 切换常见问题解答问题的样式

我目前正在我的网站上工作，在学习/理解HTML和CSS方面没有太多问题。尽管我在使用jQuery的常见问题页面上遇到了问题。我想将问题的风格从开放式切换到封闭式。尽管无论我在哪里尝试和放置切换，它只会在单击时更改样式

这是我的密码：

<script type="text/javascript">
$(document).ready(function () {
    $('dd').hide()
    $('dt').click(function () {
        var par = $(this).next();
        $('dd').each(function () {
            if ($(this) !== par) {
                $(this).hide(1000);
            }
        });
        if (par.is(':visible')) {
            par.hide(1000);
        } else {
            par.show(1000);
            $(this).toggleClass('open');
        }
    });
});
</script>

---

当前，.open样式有效，但当单击另一个问题时，它不会返回到关闭样式。我很想弄明白

根据您想要的操作，我们有几种方法来执行此任务。在我的示例中，我将简单地使用一个将打开和关闭的

。这两种方法都依赖于您通过类名或默认样式关闭了所有元素

[...]
if (par.is(':visible')) {
  par.hide(1000);
  $(this).toggleClass('close');
} else {
  par.show(1000);
  $(this).toggleClass('open');
}
[...]

第一种方法，如果打开和关闭不依赖于其他元素，则可以简单地切换打开类

$('div').click(function(){
    $(this).toggleClass('open'); 
};

第二种方法，用于打开项目时应关闭其他项目

$('div').click(function(){
    $('div').removeClass('open');
    $(this).addClass('open'); 
};

---

这两种方法都可以解决您的问题，并且应该比您当前实现的方法更易于维护。

您可以发布HTML和JSFIDLE.net示例吗？完全忘记JSFIDLE.net将在以后的文章中使用它。干杯！第二种方法非常有效！我只需要在if中添加一个.removeClass（par.is（':visible'））。如果单击同一问题，则获取要删除的类。再次感谢！你应该澄清一下。