jQuery toggleClass（）教程

jQuery javascript framework provides the toggleClass() method in order to toggle between different classes for the specified elements. The toggle will simply remove the old class and add a new class to the specified elements like button, label, div, etc.

jQuery javascript框架提供了toggleClass()方法，以便在指定元素的不同类之间进行切换。 切换按钮将仅删除旧类，并向指定的元素(如按钮，标签，div等)添加新类。

jQuery toggleClass()方法语法 (jQuery toggleClass() Method Syntax)

toggleClass() method is provided by the jQuery and in order to call the toggleClass() method the selector shouldbe used by selecting an element like div, button, label etc.

toggleClass()方法由jQuery提供，为了调用toggleClass()方法，应通过选择div，button，label等元素来使用选择器。

$(SELECTOR).toggleClass( CLASSNAME , FUNCTION( INDEX , CURRENTCLASS ) , SWITCH )

• SELECTOR is the jQuery selector that will select single or multiple items where the toggle operation will be applied.

  SELECTOR是jQuery选择器，它将选择要应用切换操作的单个或多个项目。

• CLASSNAME specifies one or more class names to add or remove. Multiple class names can be added by separating them with spaces. CLASSNAME is required.

  CLASSNAME指定一个或多个要添加或删除的类名。 可以通过使用空格分隔添加多个类名。 必填CLASSNAME。

• FUNCTION(INDEX, CURRENTCLASS) is optional and specifies a function that returns one or more class named to add or remove.

  FUNCTION(INDEX，CURRENTCLASS)是可选的，它指定一个函数，该函数返回一个或多个名为添加或删除的类。

• SWITCH is an optional parameter where a boolean value true or false is specified to add or remove. true will be specified to add class and false will be specified to remove.

  SWITCH是一个可选参数，其中指定要添加或删除的布尔值true或false。 将为true指定添加类，为false删除。

jQuery toggleClass()示例 (jQuery toggleClass() Examples)

In the following example we will change use the selector to select buttons and toggle its class to the test.

在下面的示例中，我们将更改使用选择器来选择按钮，并将其类别切换到测试。

<button class="switch-btn">Click me</button>

<div class="text collapsed">some text</div>

<script>    
    $('.switch-btn').on('click', function(e) {
      $('.text').toggleClass("collapsed"); //you can list several class names 
      e.preventDefault();
    });
</script>

LEARN MORE  Introduction to Javascript Programming Language

了解更多Javascript编程语言简介

翻译自: https://www.poftut.com/jquery-toggleclass-tutorial/