JavaScript 在点击时添加和删除类函数

Question

基本上我有这个问题。我有一个 Accordion ，一次可以打开一个标题，但我在添加位于标题右侧的打开/关闭图像时遇到问题。

到目前为止，我已经做到了，一旦您单击一个标题，它就会删除“打开”图像并切换另一个类以显示“关闭”图像。现在我需要再次换掉这些类，这样如果您切换另一个标题，它会删除另一个图像并返回到原始图像。

这是我正在使用的代码。

JavaScript

<SCRIPT>
    $("#accordion > li").click(function () {
        $("#accordian li").removeClass("faq-header");
        $(this).addClass("faq-header2");
        if (false == $(this).next().is(':visible')) {
            $('#accordion > ul').slideUp(250);
            $('#accordion > ul').addClass('faq-header');
            $(this).removeClass("faq-header");
        }
        $(this).next().slideToggle(300);
    });

    $('#accordion > ul:eq(0)').show();
</SCRIPT>

CSS

#accordion {
    list-style: none;
    margin-left:-38px;
}
#accordion ul:eq {
    background-image:url(../img/faq-open.gif);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:20px;
}
#accordion li{
    display: block;
    background-color: #FFF;
    font-weight: bold;
    cursor: pointer;
}
.faq-header {
    text-align:left;
    background-image:url(../img/faq-close.gif);
    background-repeat:no-repeat;
    background-position:right;
    margin-right:20px;
}
.faq-header2 {
    text-align:left;
    background-image:url(../img/faq-open.gif);
    background-repeat:no-repeat;
    background-position:right;
    margin-right:20px;
}
#accordion ul {
    list-style: none;
    display: none;
}
#accordion ul li{
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    border-bottom:1px solid #999;
    margin-left:-38px !important;
}

我删除了一个类并添加了另一个类，如您所见 $("#accordian li").removeClass("faq-header"); 并添加了以下 $( this).addClass("faq-header2");

但我现在需要删除 .faq-header2 并在它不再是所选部分后添加回来 .faq-header 。这对我来说似乎并不难，但我就是不知道如何编码。应该是我认为的基本 if 函数...

Answer 1

jQuery UI Accordion 是一个久经考验的跨浏览器小部件，在打开和关闭时显示图像(默认情况下在左侧，但更改 CSS 后会将它们放在右侧)

根据 here

如果您不想使用它，我会建议使用 toggleClass 选项，here

编辑

感谢您发布您的 HTML，我不一定是指整个页面，只是为您提供 Accordion 功能的 HTML，但嘿，这很酷

但首先，您的 HTML 看起来有点笨重，只是做一个 Accordion 。将 ul 放在 ul 中也不完全有效(它们倾向于放在 li 中，就像在下拉菜单样式中一样)。此外，在所有这些 ul 和 li 中似乎没有多大意义，因为无论如何每个 ul 只有一个 li，看起来标签比您真正需要的要多得多。 ul 和 li 往往带有很多默认样式(元素符号点、边距、填充、缩进等)，这可能意味着比让它们显示你想要的方式需要更多的 CSS。我会选择更简单的结构，这样可以更轻松地编写 jQuery。有点像这样

<div id="accordion">
    <h3>First header</h3>
    <div>First content</div>
    <h3>Second header</h3>
    <div>Second content</div>
</div>

无论如何，这只是根据我的经验得出的评论。对于您手头的问题，这对我有用

    $("#accordion > li").click(function () {              
            var self = $(this);
            self.next('ul').slideToggle(300, function () {
                if ($(this).is(':visible')) {
                    self.removeClass('faq-header').addClass('faq-header2')
                }
                else {
                    self.removeClass('faq-header2').addClass('faq-header')
                }
            });
            self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
        });

toggleClass，虽然很有用，但在您希望如何添加和删除类的情况下，可能没有我想象的那么有用