0

HTML コメントを使用して div 内のテキストを分割するにはどうすればよいですか。ラッツは私がやったと言います：

<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>

の後にテキストを表示または非表示にするjqueryまたはjavascriptは必要ありません<!--more-->。ありがとう

4

1 に答える 1

2

次のようなことを試すことができます：

指定されたマークアップ:

<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>​

次の JavaScript を追加します。

//1. On page load, wrap text to be hidden in <span>
$(function() {
    $("div").each(function() {
        var html = $(this).html();
        $(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
    });

    // 2. Toggle visibility of span tags when clicking link
    $('a').click(function() {
        if ($(this).html() == 'Hide') {
            $(this).prev('div').children('.hiddenText').hide();
            $(this).html('Show');
        } else {
            $(this).prev('div').children('.hiddenText').show();
            $(this).html('Hide');
        }
    });
});

実際の例については、私のjsFiddleを確認してください。

UPDATE : テキストの表示/非表示を別の CSS クラスに依存しないようにソリューションを更新しました。

于 2012-07-12T11:35:37.753 に答える