js 隐藏与展开的效果

//parent()找到低级元素

//siblings()找到同级元素

<script>

   $(function(){

       $(".g-3>div").each(function(){

           $(this).find("p").eq(0).css({width:"350px"}).css({cursor:"pointer"})

           $(this).find("p").eq(1).css({width:"390px"}).css({cursor:"pointer"})

           $(this).find("p").eq(2).css({width:"180px"}).css({cursor:"pointer"})

           $(this).find("p").eq(3).css({width:"268px"}).css({cursor:"pointer"})

        })

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

           if ($(this).attr("data-id") == 1) {

               $(this).removeClass("down")

               $(this).addClass("top")

               $(this).attr("data-id" , "0")

               $(this).parent().siblings(".wrap").css({

                   height:"100%"

               })

            } else {

               $(this).removeClass("top")

               $(this).addClass("down")

               $(this).attr("data-id" , "1")

               $(this).parent().siblings(".wrap").css({

                   height:"0"

               })

            }

        })

       $(".td:even").each(function(){

           $(this).find("p").css({background : "#f0f2f1"})

           $(this).find(".text p").css({background : "#fff"})

        })

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

               if ($(this).attr("data-id") == 1) {

                   $(this).siblings("p").find("i").removeClass("down")

                   $(this).siblings("p").find("i").addClass("top")

                   $(this).attr("data-id" , "0")

                   $(this).siblings(".wrap").css({

                       height:"100%"

                   })

                } else {

                   $(this).attr("data-id","1")

                   $(this).siblings("p").find("i").removeClass("top")

                   $(this).siblings("p").find("i").addClass("down")

                   $(this).siblings(".wrap").css({

                       height:"0"

                   })

                }

        }

        )

    })

</script>