jquery實現所有，收起，展開，顯示，隱藏的相似下拉樣式切換小例子，.parent()和.parents()的區別
方法1：javascript
<!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">css
<head>
<meta charset="utf-8">
<title>下拉所有收起例子</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.test {
padding: 10px;
color: #999999;
line-height: 150%;
padding-bottom: 15px;
border-bottom: 1px dotted #CCCCCC;
}
ul {
list-style-type: none;
}
</style>
</head>html
<body>
<table>
<tr>
<td>
<div class=test>
<ul style='margin-top:0'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class=test>
<ul style='margin-top:0'>
<li>g</li>
<li>h</li>
<li>j</li>
<li>k</li>
<li>k</li>
<li>k</li>
<li>k</li>
<li>k</li>
<li>k</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class=test>
<ul style='margin-top:0'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(function() {java
$(".test ul").find("li:gt(2)").hide();jquery
$(".test ul").find("li:last").after("<div class='show'><a>所有>></a></div>");ide
showAndHide();this
});spa
function showAndHide() {xml
$(".show").click(function() {htm
$(this).parent().find("li:gt(2)").slideToggle();
var temp = $(this).find("a");
temp.html() == "所有>>" ? temp.html("收起>>") : temp.html("所有>>");
});
}
</script>
</body>
</html>
方法2：
<!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 charset="utf-8">
<title>下拉所有收起例子</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.test {
padding: 10px;
color: #999999;
line-height: 150%;
padding-bottom: 15px;
border-bottom: 1px dotted #CCCCCC;
}
.active {
color: red;
}
ul {
list-style-type: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class=test>
<ul style='margin-top:0'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class=test>
<ul style='margin-top:0'>
<li>g</li>
<li>h</li>
<li>j</li>
<li>k</li>
<li>k</li>
<li>k</li>
<li>k</li>
<li>k</li>
<li>k</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class=test>
<ul style='margin-top:0'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
$(".test ul").find("li:gt(2)").hide();
$(".test ul").find("li:last").after("<div class='show'>all</div>");
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();
});
}
</script>
</body>
</html>
.parent()得到當前元素上一級父元素
和.parents()得到全部的祖籍父元素
- 1. JQuery parent（），parents（），parentsUntil（）的區別
- 2. jquery parent() parents() closest()區別
- 3. Jquery的parent和parents
- 4. jQuery實現圖片的隱藏、顯示、切換
- 5. jQuery下的顯示和隱藏
- 6. React切換顯示和隱藏
- 7. jquery .parents(), .parent() 和 closest()方法
- 8. jQuery 動畫animate，顯示隱藏，淡入淡出，下拉切換,過渡效果
- 9. jQuery隱藏和顯示
- 10. JS實現密碼輸入框切換顯示和隱藏
- 更多相關文章...
- • Thymeleaf顯示Bean的值 - Thymeleaf 教程
- • ionic 切換開關操作 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • IDEA下SpringBoot工程配置文件沒有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。