メニューと選択器の運用をたたむ
今日やっともとのスクリーニングラベルはまだこのように使うことができることを発見しました。
not：マッチング要素のセットから、指定された式にマッチする要素を削除します。
以下のデモの中の使用： var$category= $(".sub-category-box>ul>li：gt（2）：not（：last）″）； //リストの索引が2より大きいのは、最後の索引を除きます。
filter:rふるいは、指定された式にマッチする要素セットを選択します。この方法は整合の範囲を縮小するために用いられる。コンマで複数の表現を分ける
ドル（"ul>li"）.filter(":contains"):contains('ソニー').contains(''サムスン')).toggaleClass("promoted")////。liタグの中にキヤノン、ソニー、サムスンのラベルが含まれています。そして、クラスを設置します。
デモを探してこの2つの方法を使いました。jQueryは本当に強いと思いました。
not：マッチング要素のセットから、指定された式にマッチする要素を削除します。
以下のデモの中の使用： var$category= $(".sub-category-box>ul>li：gt（2）：not（：last）″）； //リストの索引が2より大きいのは、最後の索引を除きます。
filter:rふるいは、指定された式にマッチする要素セットを選択します。この方法は整合の範囲を縮小するために用いられる。コンマで複数の表現を分ける
ドル（"ul>li"）.filter(":contains"):contains('ソニー').contains(''サムスン')).toggaleClass("promoted")////。liタグの中にキヤノン、ソニー、サムスンのラベルが含まれています。そして、クラスを設置します。
デモを探してこの2つの方法を使いました。jQueryは本当に強いと思いました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.sub-category-box{
width: 300px;
border: 1px solid #000;
margin: 20px auto;
background-color: gainsboro;
}
.sub-category-box ul{
list-style: none;
width: 100%;
overflow: hidden;
}
.sub-category-box ul li{
float: left;
width: 95px;
height: 35px;
text-align: center;
background-color: darkorange;
box-sizing: border-box;
line-height: 40px;
border-radius: 5px;
margin: 2px;
}
.promoted{
background-color: red !important;
color: white !important;
}
.sub-category-box .show-more{
width: 100%;
height: 30px;
border: 1px solid #000;
text-align:center;
}
.sub-category-box .show-more a{
text-decoration: none;
line-height: 30px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
// 2 ，
var $category = $(".sub-category-box>ul>li:gt(2):not(:last)");
$category.hide();
$('.show-more').click(function () {
$category.stop().slideToggle(300);
//
$("ul>li").filter(":contains(' '),:contains(' '),:contains(' ')")
.toggleClass("promoted");
return false;
});
});
</script>
</head>
<body>
<div class="sub-category-box">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<div class="show-more">
<a href="javasript:void(0);"> </a>
</div>
</div>
</body>
</html>