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:292765browse

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(&#39;click&#39;,&#39;h3&#39;,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!

Detailed explanation of the use of foldable panels in JS

Related articles