Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how to use .toggleClass () on a simple div. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

In the first version, if the style class exists on each element in the matching element collection, it is removed; if an element does not have the style class, the style class is added. For example: we can apply .toggleClass () to a simple one:

Some text.

The first time we apply $('div.tumble'). ToggleClass (' bounce'), we can get the following:

Some text.

The second time I can also apply $('div.tumble'). ToggleClass (' bounce'), this style class returns to a separate tumble value:

Some text.

Apply .toggleClass ('bounce spin') on the same, and the result will switch alternately between and.

The second version of .toggleClass () uses the second parameter to determine whether a style class should be added or deleted. If the value of the parameter is true, the style class will be added; if the value of the parameter is false, the style class will be removed. It essentially goes like this:

$('# foo') .toggleClass (className, addOrRemove)

Equivalent to:

If (addOrRemove) {

$('# foo') .addClass (className)

}

Else {

$('# foo') .removeClass (className)

}

Starting with jQuery 1.4, if no parameters are passed to the .toggleClass () method, all styles on the matching element are removed the first time the method is executed, restored the second time, and so on. Similarly, starting with jQuery 1.4, you can take a function as an argument to return the style that should be displayed:

$('div.foo') .toggleClass (function () {

If ($(this). Parent (). Is ('.bar')) {

Return 'happy'

} else {

Return 'sad'

}

})

That's all of the article "how to apply .toggleClass () on simple div". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.