[jQuery]リスト表示で『もっと見る』的な機能を再現

[jQuery]リスト表示で『もっと見る』的な機能を再現

2014/10/02 ※追記

『IEで表示されない』とのご指摘がありましたので、
JSファイルを更新させて頂きました。
※IE 11では動作確認が取れました。

2015/02/24 ※追記

表示する項目数の設定値を
リストのアイテム数以上に設定した場合
リストが表示されなくなるバグの対応を行いました。

スマホサイトにおけるリスト表示でよくある
『もっと見る』的な機能をjQueryで再現してみました。
本来は非同期通信等を組み込んでやるべきなのですが
今回はすでにあるリストを編集するのみです。

ファイル一式はGithubから
ダウンロード可能になっています。
https://github.com/myhub4869/list-more

HTML側(抜粋)

<ul id="list_more">
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
	<li>
		<img src="images/list_img01.jpg" />
		<p>テストデータです。</p>
	</li>
</ul>

JS側(読み込み部分)

# No.01
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.listmore.js"></script>

JS側(実行部分)

$( document ).ready( function() {
	# No.02
	$( "#list_more" ).listMore();
});

デモページ一覧

解説

# No.01
jQueryと対象JSファイルを読み込みます。

# No.02
適用したいリストIDに対して
関数を実行します。
(現在の仕様ではタグ[ul]かタグ[ol]のみ適用可能です)


7 thoughts on “[jQuery]リスト表示で『もっと見る』的な機能を再現

  1. 表示するアイテム数を変更したいと思い、
    jquery.listmore.jsの44行目の数字を10に変更すると(showNum:10,)、
    アイテムが全て非表示になりました。
    10以上の数字は全てダメっぽいです。
    何か解決方法があれば教えて頂ければと思います。

    • 情報、ありがとうございました。

      表示する項目数をリストアイテム以上に設定しますと
      リストが表示されないようになっていましたので修正しました。

      現在、Github上に最新版をアップ致しましたので
      アップデートをしていただくと確認が取れるかと思います。

      いろいろとご迷惑をお掛けして申し訳ございません。

dreki26 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)