2009.12.17(4)-jquery例のすべての表示と簡略表示
2009.12.17(4)-jquery例のすべての表示と簡略表示
私が望んでいる効果は、10個のものを先に6個表示し、「すべて表示」をクリックして10個のものをすべて表示すると、「すべて表示」
表示ボタンが「コンパクト表示」になり、さらにクリックすると6つ表示されるという繰り返し
htmlコードを見て
1.まず、liを隠します.例えば、7つ以降は隠しますが、最後の「他のカメラ」は隠してはいけません.
2.「すべて表示」をクリックするとすべての
3.「すべて表示」を「簡略表示」に変更
4.ブランドをハイライト表示するなど、効果を加えることができます.
5.質問があります.その「すべて表示」はハイパーリンクで、他のページにジャンプするので、私たちは浏にあげます.
ビューアはfalseを返します.この5つのステップコードは次のとおりです.
分は?hideかshowかで区別できます
jqueryのすべてのコードは次のとおりです.
私が望んでいる効果は、10個のものを先に6個表示し、「すべて表示」をクリックして10個のものをすべて表示すると、「すべて表示」
表示ボタンが「コンパクト表示」になり、さらにクリックすると6つ表示されるという繰り返し
htmlコードを見て
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid
#AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#"> </a><i>(30440) </i></li>
<li ><a href="#"> </a><i>(27220) </i></li>
<li ><a href="#"> </a><i>(20808) </i></li>
<li ><a href="#"> </a><i>(17821) </i></li>
<li ><a href="#"> </a><i>(12289) </i></li>
<li ><a href="#"> </a><i>(8242) </i></li>
<li ><a href="#"> </a><i>(14894) </i></li>
<li ><a href="#"> </a><i>(9520) </i></li>
<li ><a href="#"> </a><i>(2195) </i></li>
<li ><a href="#"> </a><i>(4114) </i></li>
<li ><a href="#"> </a><i>(12205) </i></li>
<li ><a href="#"> </a><i>(1466) </i></li>
<li ><a href="#"> </a><i>(3091) </i></li>
<li ><a href="#"> </a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span> </span></a>
</div>
</div>
</body>
</html>1.まず、liを隠します.例えば、7つ以降は隠しますが、最後の「他のカメラ」は隠してはいけません.
var $hide = $('ul li:gt(5):not(:last)');
$hide.hide();2.「すべて表示」をクリックするとすべての
var $show = $('div.showmore > a');
$show.click(function(){
$hide.show();
});3.「すべて表示」を「簡略表示」に変更
$('.showmore a span').text(" ");4.ブランドをハイライト表示するなど、効果を加えることができます.
$('ul li').filter(".contains(' ')",":contains(' ')").addClass("promoted");5.質問があります.その「すべて表示」はハイパーリンクで、他のページにジャンプするので、私たちは浏にあげます.
ビューアはfalseを返します.この5つのステップコードは次のとおりです.
$(function(){
var $hide = $('ul li:gt(7):not(:last)');
$hide.hide();//
var $show = $('div.showmore > a');
$show.click(function(){
$hide.show();//
//
$('.showmore a span').css("background","url(images/up.gif)no-repeat 0
0").text(" ");
//
$('ul li').filter(":contains(' '),:contains(' '),:contains('
')").addClass("promoted");
return false;//return false
});
})分は?hideかshowかで区別できます
if($hide.is(":visible")){}else{}// jqueryのすべてのコードは次のとおりです.
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var $hide = $('ul li:gt(7):not(:last)');
$hide.hide();//
var $show = $('div.showmore > a');
$show.click(function(){
if($hide.is(":visible")){
$hide.hide();
$('.showmore a span').css("background","url(images/down.gif)no
-repeat 0 0").text(" ");
//
$('ul li').removeClass("promoted");
}else{
$hide.show();//
//
$('.showmore a span').css("background","url(images/up.gif)no-
repeat 0 0").text(" ");
//
$('ul li').filter(":contains(' '),:contains('
'),:contains(' ')").addClass("promoted");
}
return false;//return false
});
})
</script>