怎么文本下拉和收起的功能HTML,jquery实现全部，收起，展开，显示，隐藏的类似下拉样式切换小例子，.parent()和.parents()的区别...

方法1：

下拉全部收起例子

.test {

padding: 10px;

color: #999999;

line-height: 150%;

padding-bottom: 15px;

border-bottom: 1px dotted #CCCCCC;

}

ul {

list-style-type: none;

}

a b c d d d d d

g h j k k k k k k

1 2 3 4 4 4 4 4 4

$(function() {

$(".test ul").find("li:gt(2)").hide();

$(".test ul").find("li:last").after("

全部>>

");

showAndHide();

});

function showAndHide() {

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

$(this).parent().find("li:gt(2)").slideToggle();

var temp = $(this).find("a");temp.html() == "全部>>"? temp.html("收起>>") : temp.html("全部>>");

});

}

方法2：

下拉全部收起例子

.test {

padding: 10px;

color: #999999;

line-height: 150%;

padding-bottom: 15px;

border-bottom: 1px dotted #CCCCCC;

}

.active {

color: red;

}

ul {

list-style-type: none;

}

a b c d d d d d

g h j k k k k k k

1 2 3 4 4 4 4 4 4

$(function() {

$(".test ul").find("li:gt(2)").hide();

$(".test ul").find("li:last").after("

all

");

showAndHide();

});

function showAndHide() {

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

$(this).toggleClass("active");

console.log($(this).html() == 'all');

$(this).html($(this).html() == 'all' ? 'close' : 'all');

$(this).parent().find("li").toggle();

});

}

.parent()获得当前元素上一级父元素

和.parents()获得所有的祖籍父元素