問題
解決策
リストの表示件数のコントロール
お知らせ等のリストで、10、20件と増えていくと、周りの要素を圧迫してしまいます。
そこで5件だけ表示し、さらに見たい人用に「もっと見る」というボタンを配置し、ユーザーに表示件数を任せる仕様の構築方法をご紹介します。
DEMOはこちら
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
-
2019年12月1日 カテゴリ お知らせタイトル
お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。
HTMLの構築
リストを構築します。
- ※便宜上、リストをクラス「news-list」と定義します。
<ul class="news-list clearfix">
<li>
<div class="property-list clearfix">
<span class="times">2019年12月1日</span>
<span class="cat">カテゴリ</span>
<span class="titles">お知らせタイトル</span>
</div>
<div clsss="text-box clearfix">
<p>お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。</p>
</div>
</li>
<li>
<div class="property-list clearfix">
<span class="times">2019年12月1日</span>
<span class="cat">カテゴリ</span>
<span class="titles">お知らせタイトル</span>
</div>
<div clsss="text-box clearfix">
<p>お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。</p>
</div>
</li>
... 計10件
</ul>CSSの構築
クラス「news-list」に対し、CSSを構築します。
.news-list > li {
margin-bottom: 10px;
padding: 10px 15px;
border: 1px solid #c3c3c3;
}
.news-list > li .property-list{
margin-bottom: 0;
}
.news-list > li .property-list .times{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
font-size: 93.75%;
}
.news-list > li .property-list .cat{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
padding: 1px 10px;
color: #ffffff;
font-size: 87.5%;
background-color: #F15A24;
}
.news-list > li .property-list .titles{
display: block;
font-weight: bold;
}
.news-list > li .text-box{
margin-bottom: 20px;
}
.more_btn{
text-align: center;
}
.more_btn a{
display: inline-block;
padding: 6px 12px;
color: #F15A24;
font-weight: bold;
letter-spacing: 1pt;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #F15A24;
}jQueryの構築
jQueryを構築します。
var rw = $(window).width();
if($(".news-list").length){
$(".news-list").each(function(){
//最初に表示させるアイテムの数
var fixnums = 5;
var nums = 5;
var gtnums = 4;
var morelist = $(this);
//liの個数を取得しておく
var listvol = morelist.find("li").length;
// ボタンを生成する
morelist.after('<p class="more_btn"><a href="#">もっと見る</a></p>');
function mores(){
//liが設定した表示件数より多ければ
if(listvol > fixnums){
var morebtn = morelist.next('.more_btn');
morebtn.show();
//設定した件数まで表示
morelist.find("li:not(:lt("+nums+"))").hide();
//moreボタンがクリックされた時
morebtn.find('a').click(function(){
event.preventDefault();
// closedクラスを保持しているかどうか
if(!morebtn.hasClass('closed')){
// closedクラスを保持していなければ
//numsに+3ずつしていく = 3行ずつ追加する
nums +=3;
morelist.find("li:lt("+nums+")").slideDown();
//liの個数よりnumsが多い時、
if(listContents <= nums){
//アイテムの数のリセット
nums = 5,
gtnums = nums-1;
morebtn.addClass('closed');
$(this).html('元の件数に戻す');
}
}else{
// closedクラスを保持しているならば
morelist.find("li:gt("+gtnums+")").slideUp();//設定した件数以降は非表示にし、
morebtn.removeClass('closed');
$(this).html('もっと見る');
//liの個数よりnumsが多い時、
if(listContents <= fixnums){
morebtn.hide();
}
}
});
}else{
morebtn.hide();
}
}; // mores
mores();
$(window).resize(function(){
if(rw > 640 && $(window).width() <= 640) {
mores();
}
if(rw <= 640 && $(window).width() > 640) {
mores();
}
rw = $(window).width();
})
}); // $(".news-list").each
}; // $(".news-list").length参考
【JavaScript – jQuery 「もっと見る」でn件ずつ表示し、末尾に達したら初期件数表示に戻すボタンを設置したい。｜teratail】
https://teratail.com/questions/92715
【JavaScript – jQueryで初期は5件表示の記事リストを複数設置したい｜teratail】
https://teratail.com/questions/95956
【jQuery リファレンス：:lt( )】
http://www.jquerystudy.info/reference/selectors/lt.html
コメント