单击JavaScript添加和删除类函数

JavaScript add and remove class function on click

本文关键字：删除 类函数 添加 JavaScript 单击      更新时间：2023-09-26

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

到目前为止，我已经有了它，所以一旦你点击一个标题，它就会删除"打开"的图像，并为"关闭"的图像切换另一个类。现在，我需要再次交换这些类，这样，如果切换另一个标题，它会删除另一个图像并返回到原始图像。

这是我正在使用的代码。

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函数。。。

jQuery UI手风琴是一个经过充分验证的跨浏览器小部件，可以在打开和关闭时显示图像（默认情况下在左侧，但CSS的一个更改会将它们放在右侧）

根据此处

如果你不想使用它，我会选择toggleClass，这里是

编辑

谢谢你发布你的HTML，我不一定是指整个页面，只是HTML为你手风琴功能，但嘿，这很酷

不过，第一点是，您的HTML对于只做手风琴来说似乎有点沉重。把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，尽管在您希望如何添加和删除类的情况下很有用，但可能没有我想象的

那么有用

我认为toggle()函数有点不直观。我通常使用我的pwn方法replaceClass（）来做你想做的事情：

void replaceClass(Object classList, String surrogateClass, String classToReplace);

定义为遵循

function replaceClass(elementClassList, firstClass, secondClass) {
 if(elementClassList.contains(firstClass)){
 {
  elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}
相关文章：