記事をデフォルトでは9件・3列で表示し、「もっと見る」ボタンを押すと、
同じ形式で他の記事が表示されるようにしたいと考えています。
画面幅が狭くなった時は2列で表示したいのですが、
現状では記事の数が3の倍数のため、10番目の記事が表示されず空きができてしまいます。
これを解決する方法を探しています。
よろしくお願いいたします ><
現状のサンプル:https://jsfiddle.net/shiosu/o3ysLvt1/
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>もっと見る</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7</head> 8 9<body> 10<div class="content"> 11 <div class="post-wrap"> 12 <article class="post"> 13 <p>記事:01</p> 14 </article> 15 16 <article class="post"> 17 <p>記事:02</p> 18 </article> 19 20 <article class="post"> 21 <p>記事:03</p> 22 </article> 23 24 <article class="post"> 25 <p>記事:04</p> 26 </article> 27 28 <article class="post"> 29 <p>記事:05</p> 30 </article> 31 32 <article class="post"> 33 <p>記事:06</p> 34 </article> 35 36 <article class="post"> 37 <p>記事:07</p> 38 </article> 39 40 <article class="post"> 41 <p>記事:08</p> 42 </article> 43 44 <article class="post"> 45 <p>記事:09</p> 46 </article> 47 </div><!-- / .post-wrap --> 48</div><!-- / .content --> 49<div class="more">もっと見る</div> 50 51<div class="content"> 52 <div class="post-wrap"> 53 <article class="post"> 54 <p>記事:10</p> 55 </article> 56 57 <article class="post"> 58 <p>記事:11</p> 59 </article> 60 61 <article class="post"> 62 <p>記事:12</p> 63 </article> 64 </div><!-- / .post-wrap --> 65</div><!-- / .content --> 66</body> 67</html>
css
1@charset "UTF-8"; 2 3.content { 4 margin-bottom: 10px; 5} 6 7.post-wrap { 8 display: flex; 9 justify-content: space-between; 10 flex-wrap: wrap; 11 width: 80%; 12 margin: 0 auto; 13 background: yellow; 14} 15 16.post { 17 width: 30%; 18 height: 150px; 19 margin-bottom: 20px; 20 background: #DDD; 21} 22 23.more { 24 width: 200px; 25 padding: 5px; 26 color: #fff; 27 text-align: center; 28 margin: 0 auto; 29 cursor: pointer; 30 background: green; 31} 32 33@media (max-width: 500px) { 34 .post-wrap { 35 background: pink; 36 } 37 .post { 38 width: 45%; 39 } 40}
js
1$(function(){ 2 $('.content:not(.content:first-of-type)').css('display','none');//一番上の要素以外を非表示 3 $('.more').nextAll('.more').css('display','none');//ボタンを非表示 4 $('.more').on('click', function() { 5 $(this).css('display','none');//押したボタンを非表示 6 $(this).next('.content').fadeIn(); 7 $(this).nextAll('.more:first').css('display','block'); //次のボタンを表示 8 }); 9});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/20 03:00
2018/07/20 03:08
2018/07/20 03:20 編集