質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5759questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQueryプラグイン

    495questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

【jQuery】レスポンシブに対応した「もっと見る」を作りたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 168

shiosu

score 9

記事をデフォルトでは9件・3列で表示し、「もっと見る」ボタンを押すと、
同じ形式で他の記事が表示されるようにしたいと考えています。
画面幅が狭くなった時は2列で表示したいのですが、
現状では記事の数が3の倍数のため、10番目の記事が表示されず空きができてしまいます。
これを解決する方法を探しています。
よろしくお願いいたします ><

現状のサンプル:https://jsfiddle.net/shiosu/o3ysLvt1/

イメージ説明

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>もっと見る</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div class="content">
  <div class="post-wrap">
    <article class="post">
      <p>記事:01</p>
    </article>

    <article class="post">
      <p>記事:02</p>
    </article>

    <article class="post">
      <p>記事:03</p>
    </article>

    <article class="post">
      <p>記事:04</p>
    </article>

    <article class="post">
      <p>記事:05</p>
    </article>

    <article class="post">
      <p>記事:06</p>
    </article>

    <article class="post">
      <p>記事:07</p>
    </article>

    <article class="post">
      <p>記事:08</p>
    </article>

    <article class="post">
      <p>記事:09</p>
    </article>
  </div><!-- / .post-wrap -->
</div><!-- / .content -->
<div class="more">もっと見る</div>

<div class="content">
  <div class="post-wrap">
    <article class="post">
      <p>記事:10</p>
    </article>

    <article class="post">
      <p>記事:11</p>
    </article>

    <article class="post">
      <p>記事:12</p>
    </article>
  </div><!-- / .post-wrap -->
</div><!-- / .content -->
</body>
</html>
@charset "UTF-8";

.content {
  margin-bottom: 10px;
}

.post-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
  background: yellow;
}

.post {
  width: 30%;
  height: 150px;
  margin-bottom: 20px;
  background: #DDD;
}

.more {
  width: 200px;
  padding: 5px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  background: green;
}

@media (max-width: 500px) {
  .post-wrap {
    background: pink;
  }
  .post {
    width: 45%;
  }
}
$(function(){
  $('.content:not(.content:first-of-type)').css('display','none');//一番上の要素以外を非表示
  $('.more').nextAll('.more').css('display','none');//ボタンを非表示
  $('.more').on('click', function() {
    $(this).css('display','none');//押したボタンを非表示
    $(this).next('.content').fadeIn();
    $(this).nextAll('.more:first').css('display','block'); //次のボタンを表示
  });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

記事をデフォルトでは9件・3列で表示し、「もっと見る」ボタンを押すと、
同じ形式で他の記事が表示されるようにしたいと考えています。

もしこの部分の「9件」の部分を6の倍数(6件とか12件とか)に変更しても良ければそれで解決すると思います。

どうしても「9件」づつ表示しなければ行けない場合は、そういう仕様と割り切るのも有りだと思います。
無理やりやろうとするとウィンドウの幅をとってコンテンツが何個表示されているかを判断して一番最後の要素を幅100%にして~とか、、、
結果どうなったら正解なのかにもよりますが色々とカオスになりそうな気がします。

タグの構成とかを変えてよければこんな感じにしてみてら多少はましかもしれません。(コードはアレですが。)

サンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/20 12:00

    ご回答ありがとうございます!
    サンプルまで、感謝です、、、!

    回答頂いたサンプルの方がhtmlで「.more」が一箇所で済んですごい嬉しいです!
    しかもなんか、おしゃれなアニメーションまで!!
    「.more」を押したあとちゃんと「記事:9」の隣に「記事:10」が配置されるのも良いです!!!
    (語彙力なくてすいません;)
    初心者の私にはアレなところがわかりません >< すごいです!

    図々しいお願いで本当に申し訳ないのですが、記事が全て表示し終えたら
    「.more」ボタンを消す方法を教えていただけないでしょうか??

    キャンセル

  • 2018/07/20 12:08

    先程のサンプルに追加しました。
    やってることは1ページに出す記事と全記事から何ページあるか割り出して最後のページになったらボタンを消してるだけです。

    だたし、このサンプルのコードは業務レベルのものではなくあくまでサンプルですので
    近くに詳しい方がいなくて、ご自身で解釈が難しい場合使わないほうがいいかもしれません。

    キャンセル

  • 2018/07/20 12:19 編集

    ありがとうございます!!!
    理解できていないのに使うのは駄目ですよね、、承知しました。
    (業務レベルじゃないとしてもすごいありがたいです、、)

    今回は6の倍数で、教えていただいたコードを参考にして
    ちゃんと理解できた部分を使って展開しようと思います。
    ありがとうございました!

    キャンセル

0

解決済みですが、CSSでやってしまえばよいと思います。

/* ADD */
@media (max-width: 500px) {
  .post:nth-last-child(1):nth-child(2n+1) {
    display: none;
  }
}

動くサンプル:https://jsfiddle.net/hkr0g614/


【何番目系の便利なCSSまとめ】
https://qiita.com/ituki_b/items/62a752389385de7ba4a2

【CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld】
https://www.nxworld.net/tips/css-nth-child-and-nth-last-child.html

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/20 13:24

    あ、要件を勘違いしていました、無視してください。

    キャンセル

  • 2018/07/20 15:03

    ご検討いただき感謝です、、!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5759questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQueryプラグイン

    495questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。