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

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

新規登録して質問してみよう
ただいま回答率
85.42%
JavaScript

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

jQuery

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

Q&A

解決済

1回答

3415閲覧

jQueryで初期は5件表示の記事リストを複数設置したい

Yukos

総合スコア8

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/10/11 20:21

編集2017/10/12 01:28

jQueryで下記のような開閉式のリストを作っています。
初期は5件だけ表示して、「もっと見る」ボタンで全件表示し、「閉じる」で初期状態に戻すようにしています。
boxが1個だけなら問題なかったのですが、複数設置した場合、思い通りの動作になりません。

追記: 初期状態で5件以下の場合、「もっと見る」ボタンを非表示にしたいです。

html

1<div class="box"> 2 <ul class="list"> 3 <li>1件目の記事</li> 4 <li>2件目の記事</li> 5 <li>3件目の記事</li> 6 <li>4件目の記事</li> 7 <li>5件目の記事</li> 8 <li>6件目の記事</li> 9 <li>7件目の記事</li> 10 <li>8件目の記事</li> 11 <li>9件目の記事</li> 12 <li>10件目の記事</li> 13 </ul> 14 <div class="btn"> 15 <span class="txt-more">もっと見る</span> 16 <span class="txt-close">閉じる</span> 17 </div> 18 </div> 19<div class="box"> 20 <ul class="list"> 21 <li>1件目の記事</li> 22 <li>2件目の記事</li> 23 <li>3件目の記事</li> 24 <li>4件目の記事</li> 25 <li>5件目の記事</li> 26 <li>6件目の記事</li> 27 <li>7件目の記事</li> 28 <li>8件目の記事</li> 29 <li>9件目の記事</li> 30 <li>10件目の記事</li> 31 </ul> 32 <div class="btn"> 33 <span class="txt-more">もっと見る</span> 34 <span class="txt-close">閉じる</span> 35 </div> 36 </div>

Javascript

1$(function() { 2 var total_list = $(".list li").length; 3 if (total_list > 5) { 4 $(".list li:gt(4)").addClass("is-hide"); 5 } 6 $(".btn").click(function() { 7 if ($(this).hasClass("is-open")) { 8 $(".list li:gt(4)").addClass("is-hide"); 9 $(this).removeClass("is-open"); 10 } else { 11 $(".list li.is-hide").removeClass("is-hide"); 12 $(this).addClass("is-open"); 13 } 14 }); 15});

CSS

1 .is-hide {display: none;} 2 .txt-close {display: none;} 3 .is-open .txt-more {display: none;} 4 .is-open .txt-close {display: block;}

色々検索してみて、eachを使えばいいというのがわかったのですが、Javascriptの基本がわかっていないため、どのように記述していいかわかりません。ご教授いただければ幸いです。
よろしくお願いいたします。

こちらの記事を参照しました。書き方がわからず、試し方もわからなかったため、質問させていただきました。
http://www.tsunagu-tsunagaru.com/entry/jQuery-%E8%A4%87%E6%95%B0%E3%81%AE%E5%90%8C%E4%B8%80%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%92%E6%8C%81%E3%81%A4%E8%A6%81%E7%B4%A0%E3%81%AB%E5%AF%BE%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%82%92%E8%A1%8C%E3%81%86

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/12 00:17

「eachを使えばいいというのがわかった」のであればそれを試したコードも質問文に追記してください。また、参考にした記事のURLも提示してください。
guest

回答1

0

ベストアンサー

たとえばこう

css

1.box.hide li:nth-child(n+6){display:none;} 2span.hide{display:none;} 3

javascript

1$(function() { 2 $('.box').addClass('hide'); 3 $('.btn span:nth-child(2)').addClass('hide'); 4 /* 追記:5件以下の場合は、もっと見るボタンを非表示*/ 5 $('.box .list:not(:has(li:nth-child(6)))').next('.btn').find('span').addClass('hide'); 6 7 $('.btn').on('click',function(){ 8 $(this).closest('.box').toggleClass('hide'); 9 $(this).find('span').toggleClass('hide'); 10 }); 11});

HTML

1 <div class="box"> 2 <ul class="list"> 3 <li>1件目の記事</li> 4 <li>2件目の記事</li> 5 <li>3件目の記事</li> 6 <li>4件目の記事</li> 7 <li>5件目の記事</li> 8 <li>6件目の記事</li> 9 <li>7件目の記事</li> 10 <li>8件目の記事</li> 11 <li>9件目の記事</li> 12 <li>10件目の記事</li> 13 </ul> 14 <div class="btn"> 15 <span>もっと見る</span> 16 <span>閉じる</span> 17 </div> 18 </div> 19 <div class="box"> 20 <ul class="list"> 21 <li>1件目の記事</li> 22 <li>2件目の記事</li> 23 <li>3件目の記事</li> 24 <li>4件目の記事</li> 25 <li>5件目の記事</li> 26 <li>6件目の記事</li> 27 <li>7件目の記事</li> 28 <li>8件目の記事</li> 29 <li>9件目の記事</li> 30 <li>10件目の記事</li> 31 </ul> 32 <div class="btn"> 33 <span>もっと見る</span> 34 <span>閉じる</span> 35 </div> 36 </div> 37

追記

idを付けたチェックボックスをスイッチにしていいならjavascriptもいりません

CSS

1input.switch{position:absolute;top:-9999px;} 2input:checked+.box li:nth-child(n+6){display:none;} 3.box label span:nth-child(1){display:none;} 4input:checked+.box label span:nth-child(1){display:inline;} 5input:checked+.box label span:nth-child(2){display:none;}

HTML

1<input type="checkbox" id="dsp1" checked class="switch"> 2<div class="box"> 3 <ul class="list"> 4 <li>1件目の記事</li> 5 <li>2件目の記事</li> 6 <li>3件目の記事</li> 7 <li>4件目の記事</li> 8 <li>5件目の記事</li> 9 <li>6件目の記事</li> 10 <li>7件目の記事</li> 11 <li>8件目の記事</li> 12 <li>9件目の記事</li> 13 <li>10件目の記事</li> 14 </ul> 15 <label for="dsp1"> 16 <span>もっと見る</span> 17 <span>閉じる</span> 18 </label> 19 </div> 20<input type="checkbox" id="dsp2" checked class="switch"> 21<div class="box"> 22 <ul class="list"> 23 <li>1件目の記事</li> 24 <li>2件目の記事</li> 25 <li>3件目の記事</li> 26 <li>4件目の記事</li> 27 <li>5件目の記事</li> 28 <li>6件目の記事</li> 29 <li>7件目の記事</li> 30 <li>8件目の記事</li> 31 <li>9件目の記事</li> 32 <li>10件目の記事</li> 33 </ul> 34 <label for="dsp2"> 35 <span>もっと見る</span> 36 <span>閉じる</span> 37 </label> 38 </div>

投稿2017/10/12 01:01

編集2017/10/12 01:41
yambejp

総合スコア115495

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yukos

2017/10/12 01:17

ありがとうございます。こういうやり方もあるのですね! jQuery初心者としてはわかりやすい書き方で有り難いです。 ただ、初期状態で5件以下の場合は、もっと見るボタンを非表示にしたいです。 説明が足りず申し訳ありません。
Yukos

2017/10/12 01:26

追記ありがとうございます。 cssは少しはわかるつもりでしたが、見たこともない目からうろこな書き方でした! javascriptが必須だと思っていたのですが、cssだけでもここまで実装できるのですね。 大変参考になるご回答をありがとうございます。 javascriptなしでも5件以下の場合に、もっと見るボタンを非表示にしたり可能なのでしょうか?
yambejp

2017/10/12 01:42

> 初期状態で5件以下の場合は、もっと見るボタンを非表示 jQuery版に追記しておきました
Yukos

2017/10/12 01:52

思い通りの動作になりました! しかもわかりやすくて、嬉しいです。 eachを使うことに頭がいっていたのですが、予想していなかった方法で解決できました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問