How to realize the effect of list expansion and folding in web
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!
