0

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

4

2 回答 2

1

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

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

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

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

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

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

于 2013-08-12T19:54:28.640 回答
0 
[...]
if (par.is(':visible')) {
  par.hide(1000);
  $(this).toggleClass('close');
} else {
  par.show(1000);
  $(this).toggleClass('open');
}
[...]
于 2013-08-12T19:50:59.873 回答