切换常见问题的样式答案

【问题标题】：Toggle styles for FAQ questions切换常见问题的样式
【发布时间】：2013-08-12 19:45:09
【问题描述】：

我目前正在开发我的网站，并且在学习/理解 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 样式有效，但当单击另一个问题时，它不会回到关闭的样式。我很想弄清楚这一点！

【问题讨论】：

你能发布你的 HTML 和一个 jsFiddle.net 的例子吗？
完全忘记了 jsFiddle.net 将在以后的帖子中使用它。

标签： jquery styles toggle

【解决方案1】：

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

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

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

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

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

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

【讨论】：

干杯第二个工作就像一个魅力！我只需要在 if (par.is(':visible')) 中添加一个 .removeClass。如果您单击相同的问题，则要删除该类。再次感谢！

【解决方案2】：

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

【讨论】：

你应该澄清一下。