[jquery] Combine the class selector, next, and prev methods to achieve the expansion and hiding effect of adjacent nodes-JS Tutorial-php.cn

[jquery] Combine the class selector, next, and prev methods to achieve the expansion and hiding effect of adjacent nodes

巴扎黑

Release： 2017-06-22 10:00:36

Original

1235 people have browsed it

In the page effect, sometimes the IDattribute cannot be added to the columns looped out by our program, because there may be lists that may loop out multiple identical IDs, so the ID selector of Jquery cannot be used. At this time we can use the Class selector,

At the same time, we may also need to limit the operation of this node element to the current p (or table), let’s look at the code:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery效果title>
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript">script>
    <script type="text/javascript">
        //展开隐藏层
        $(document).ready(function () {
            $(".part").click(function () {
                var hideP = $(this).next();
                if (hideP.css('display') == 'none') {
                    hideP.show();
                    $(this).hide();
                }
                else {
                    hideP.hide();
                    $(this).show();
                }
            });
            $(".all").click(function () {
                var hideP = $(this).prev();
                if (hideP.css('display') == 'none') {
                    hideP.show();
                    $(this).hide();
                }
}               });               });
head>

<

body> < p
class='classA'>
                                                                                                                                        ;/p> ;
p> p
> <p class='classA '>< p
class="part">Content 2p>         ="all" style ="display:none"
>Content 2, hahaha, I expanded it, here is more content p>
p >                                                                                                         <p class="part">Content 3p>
class="all" style="display:none">Content 3, hahaha, I expanded it, here is more content haha p> p
> to other contents of the same classA. In fact, the focus here is the use of the jquery next and prev methods. Of course, they can also be used in other situations.

The above is the detailed content of [jquery] Combine the class selector, next, and prev methods to achieve the expansion and hiding effect of adjacent nodes. For more information, please follow other related articles on the PHP Chinese website!