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

This article mainly shows you "how to achieve the list expansion effect in web", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve the list expansion effect in web" this article.

$(".btn") .click (function () {

$(this) .showDiv ("class of the outermost div of the current element") .toggleClass ("showDiv") .siblings () .removeClass ("showDiv")

});

Css:

. Outermost div class. The class {of the expanded div needs to be put away.

Display: none

}

.showDiv. The class {of the expanded div needs to be put away.

Display: block

}

Implementation idea: to expand and close the list by dynamically adding the class of showDiv

Demo:

Html:

Jinri Toutiao

Button

What needs to be unfolded and put away

Jinri Toutiao

Button

What needs to be unfolded and put away

Css:

.none {

Display:none

}

.aa. Aa-cont {

Display: none

}

.showDiv. Aa-cont {

Display: block

}

Js:

$(".btn") .click (function () {

$(this) .salary (".aa") .toggleClass ("showDiv") .siblings () .removeClass ("showDiv")

});

This method is relatively simple and easy to understand.

The above is all the contents of the article "how to unfold the list in web". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.