-
-
Save tmitz/4173232 to your computer and use it in GitHub Desktop.
listのn番目以降を隠したり表示したりするjQuery(gist: 4168815 をもうちょっとかっこよくした)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
var n = 10; // 初期状態で表出したいlistの個数 | |
var contents = '.list li'; // 対象のlist | |
var trigger = '.trigger'; // スイッチ | |
// listがn個以上ある場合 | |
if ($(contents).length > n) { | |
// server sideでやって欲しい | |
// span は追加してもた | |
if ($(contents).eq(n).is(":hidden")) { | |
$(trigger).html([ | |
'<a href="#">', | |
'<i class="icon-sort-up" style="display:none"></i>', | |
'<span class="icon-sort-close" style="display:none">閉じる</span>', | |
'<i class="icon-sort-down"></i>', | |
'<span class="icon-sort-more">もっと見る</span>', | |
'</a>' | |
].join('')); | |
} else { | |
$(trigger).html([ | |
'<a href="#">', | |
'<i class="icon-sort-up"></i>', | |
'<span class="icon-sort-close">閉じる</span>', | |
'<i class="icon-sort-down" style="display:none"></i>', | |
'<span class="icon-sort-more" style="display:none">もっと見る</span>', | |
'</a>' | |
].join('')); | |
} | |
// sliceでn番目以降を隠す | |
$(contents).slice(n).hide(); | |
// toggle ベースに | |
$(trigger).on('click', function() { | |
$(".icon-sort-up, .icon-sort-down").toggle(); | |
$(".icon-sort-more, .icon-sort-close").toggle(); | |
$(contents).slice(n).fadeToggle('fast'); | |
}); | |
// listがn個以下の場合はスイッチを隠す | |
} else { | |
$(trigger).hide(); | |
} | |
}); |
勉強になるなあ:rabbit:
そうすると8〜29行目までJSから消せるッ・・・!
JS側でHTMLガチャガチャ組むのキライなだけですw 必要なときはjsRenderみたいなテンプレートエンジン使いますな。
確かに、JSの中にHTML書くとわかりにくいもんなあ。サーバーサイドに書ける時は書いて置いたほうがよいのですね:hatched_chick:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
うおお、あざっす!
slice…そんな技が・・・知らなんだ(ΦωΦ)
そうか、toggle使うと、$(trigger).htmlの部分はhtmlにそのまま書いて置いたほうがよさそうですねw