切换常见问题解答的样式

Question

我目前正在我的网站上工作，学习/理解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>

这是CSS（它可能有点多余，因为我正在通过帖子/其他网站学习）：

dl.faq dt    {
       color: #268bd2;
       font-weight: bold;
       cursor: pointer;
       margin: 0 0 10px 0;
       padding: 0 0 10px 20px;
       background: url(images/faqarrow.png) 0 0 no-repeat;
       line-height: 16px;
       border-bottom: 1px solid rgb(225, 225, 225);
       }
dl.faq dd{
        margin: 0 0 10px 0;
        padding: 0 0 10px 20px;
        background-color:#ededed;
        }
dl.faq dt:hover    {
       color: #2aa198;
       background-position: 0 -32px;
       background: url(images/faqarrow.png) 0 0 no-repeat;
       }
dl.faq dt.close{
       color: #268bd2;
       background-position: 0 -32px;
       background: url(images/faqarrow.png) 0 0 no-repeat;
       }
dl.faq dt.open{
       color: #2aa198;
       background-position: 0 -32px;
       background: url(images/faqarrowdown.png) 0 0 no-repeat;
       }
dl.faq dt.open:hover {
        background-position: 0 -96px;
        background: url(images/faqarrowdown.png) 0 0 no-repeat;
        }

目前，.open风格有效，但当点击另一个问题时，它不会回到关闭的风格。我很想弄清楚！

Answer 1

根据您想要的操作，我们有几种方法来执行这些任务。在我的例子中，我将简单地使用一个<div>，它将打开和关闭。这两者都依赖于您已经通过类名或默认样式关闭了所有元素。

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

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

第二种方法，用于打开某个项目时应关闭其他项目的情况。

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

任何一种方法都可以解决您的问题，并且应该比您当前实现的方法更容易维护。

Answer 2

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