JavaScript display noneについて

Question

もっと見るボタンで要素を表示する際の質問です。
もっと見るを押下し、一覧を5件表示するようにしているんですが、
その一覧の5件の中でも他のjs（テキストを省略）をつかっています。

もっと見るを押下した際に、「一覧の5件の中でも他のjs（テキストを省略）」
このjsが効かなくなってしまいます。
具体的にはテキスト1行以上の場合「・・・」を表示するというものです。
記載方法は以下になります。
テキストを省略するのはtrunk8というのをつかっっております。

$('#slide').click(function(){
if ($('#target').css('display') == 'none') {
$('#target').slideDown('slow');
$(this).addClass('non');
}
});

<a href="javascript:void(0);" id="slide"><span>もっと見る</span></a>

<div id="target" style="display: none;"> <p>1件</p> <p>2件</p> <p>3件</p> <p>4件</p> </div>

もっと見るを押下した際に、他のjsを聞くようにしたいのです。
なにか良い方法がありますでしょうか？

よろしくお願いいたします。

Answer 1

slideDownとtrunk8の処理がぶつかっている可能性がありますので、
slideDownする要素とtrunk8を使う要素を別々にするのがよいと思います。
例えばこんな感じに。

<a href="javascript:void(0);" id="slide"><span>もっと見る</span></a>
<div id="target" style="display: none;">
	<div>
	  <p>1件</p>
	  <p>2件</p>
	  <p>3件</p>
	  <p>4件</p>
	</div>
</div>

$('#slide').click(function(){
	if ($('#target').css('display') == 'none') {
		$('#target').slideDown('slow').children("div").trunk8();
		$(this).addClass('non');
	}
});

Comments

[ikurachan]

ina様

ありがとうございます！
試してみます。

Answer 2

表示するときに以下を追加してみてはどうでしょう?

$("#target").children("p").trunk8();

Comments

[ikurachan]

ShunsukeIzui様

ありがとうございます！