最後に「...」が追加されたdivの最初の行を表示し、クリックすると「...」を削除してブロック全体を表示したい。また、2 回目のクリックでコンパクトな 1 行バージョンに戻す方法を知りたいです。
JavaScript を使用してこれを行う簡単な方法はありますか? jQueryを使用しています。
最後に「...」が追加されたdivの最初の行を表示し、クリックすると「...」を削除してブロック全体を表示したい。また、2 回目のクリックでコンパクトな 1 行バージョンに戻す方法を知りたいです。
JavaScript を使用してこれを行う簡単な方法はありますか? jQueryを使用しています。
私が通常使用する方法は、テキストの 2 つのバージョン (短いテキストと長いテキスト) を HTML 内で隣り合わせに配置することです。1つは非表示(長い方)で、それをクリックすると、jQueryは2つの要素間で交換できます...
PHPのsubstr()
関数を使用して文字列を準備できます...
echo substr("This is a long line of text",0,9) . '...';
// This is a...
$string = "Two birds flew over the rainbow. The second bird had a stroke.";
$shorten = substr($string, 0, strpos($string, '.')) . '...';
これにより、短縮されたタイトルがないと仮定して、テキストが最初の文に短縮されます。
jQueryもシンプルです。
<script>
$(document).ready(function(){
$('#toggle').hide();
$('.toggle').click(function(){
$('#toggle').toggle();
});
});
</script>
<?php echo $shorten; ?>
<br /><a href="#" class="toggle">read more</a>
<div id="toggle"><?php echo $string; ?></div>
おそらく最もエレガントなソリューションではありませんが、うまくいくはずです...
div span { display:none; }
div b { font-weight:normal; }
<div>Blah blah blah blah<b>...</b> <span>blah blah blah blah blah</span></div>
jQuery("div").toggle(function() {
$(this).find("b").hide();
$(this).find("span").show();
},
function() {
$(this).find("b").show();
$(this).find("span").hide();
}).