0

最後に「...」が追加されたdivの最初の行を表示し、クリックすると「...」を削除してブロック全体を表示したい。また、2 回目のクリックでコンパクトな 1 行バージョンに戻す方法を知りたいです。

JavaScript を使用してこれを行う簡単な方法はありますか? jQueryを使用しています。

4

3 に答える 3

1

私が通常使用する方法は、テキストの 2 つのバージョン (短いテキストと長いテキスト) を HTML 内で隣り合わせに配置することです。1つは非表示（長い方）で、それをクリックすると、jQueryは2つの要素間で交換できます...

PHPのsubstr()関数を使用して文字列を準備できます...

echo substr("This is a long line of text",0,9) . '...';

// This is a...
于 2012-07-12T13:22:46.290 に答える
1 
$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>
于 2012-07-12T13:27:16.460 に答える
0

おそらく最もエレガントなソリューションではありませんが、うまくいくはずです...

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();
  }).
于 2012-07-12T13:33:26.340 に答える