Home > Article > Web Front-end > Detailed explanation of the use of foldable panels in JS
Detailed explanation of the use of foldable panels in JS
- php中世界最好的语言Original
- 2018-03-26 09:15:292722browse
This time I will bring you a detailed explanation of the use of JS collapsible panels. What are the precautions when using JS collapsible panels? Here are practical cases, let’s take a look.
For example
<html>
<div id="accord">
<h3>Part1</h3>
<p> I am part 1</p>
<h3>Part2</h3>
<p>I am part 2</p>
<h3>part 3</h3>
<p>I am part 3</p>
</div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>$("#accord").on('click','h3',function(e){ //绑定单击事件
$(this).next().slideToggle(); //深入理解next选择器})
</script>
</html>Analysis
The key is to understand the next method
and the slideToggle method
this refers to the current element h3
next selects the adjacent elements of the same level, not that the tags are the same. For example, in this example p and h3 are of the same level
The above is a chain operation
where
$(this).next().slideToggle();
can also be written as
$(this)
.next()
.slideToggle();I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!
Recommended reading:
How to sort according to the key value size of the array
Laravel implements multi-user authentication system
The above is the detailed content of Detailed explanation of the use of foldable panels in JS. For more information, please follow other related articles on the PHP Chinese website!