テキストの展開と折りたたみの効果を実現するJavaScript

リスト形式のテキストの展開と折りたたみの実装は参考までに。具体的な内容は以下のとおりです。

必要：

1. テキストが目標値を超えると、目標値が遮断され、他の値は非表示になり、「展開」という単語とドロップダウン矢印が同時に表示されます。
2. 「展開」をクリックしてすべてのテキストを表示し、「折りたたみ」に変更してプルアップ矢印をクリックします。
3. テキスト自体が目標値を超えない場合は、テキスト全体を表示する

CSSを使用して非表示にする行数を設定するか、非表示にするLiタグの高さを設定することを考えましたが、どちらも上記の3番目の要件を満たすことができないため、次の方法を思いつきました。

アイデア:

1. 最初に展開および折りたたみが必要な要素を走査し、目標値を超えた場合は非表示にして、すべてのタグの内容を保存します（後ですべてを表示するときに使用されます）。
2. クリックして展開または折りたたむと、現在のコンテンツに応じて保存されている値を照合し、対応する処理を行って表示します。

html

<ul class="outList">
        <li>
            <div>第5-14号</div>
            <ul class="innerList">
                <li class="wordsContent">1111111111111111111111111</li>
                <li class="wordsContent">2222222222222222222222222</li>
                <li class="wordsContent">333333333333333333333333</li>
            </ul>
        </li>
        <li>
            <div>第5-15号</div>
            <ul class="innerList">
                <li class="wordsContent">4444</li>
                <li class="wordsContent">5555555555555555555555555555</li>
                <li class="wordsContent">66666666666666666666666666</li>
            </ul>
        </li>
</ul>

ul、li {
   リストスタイル: なし;
 }
.innerList>li {
     下マージン: 0.2rem;
     border-bottom: 0.01rem 緑一色;
     ボックスのサイズ: 境界線ボックス;
     パディング: 0.2rem 5% 0.7rem 3%;
     位置: 相対的;
     下マージン: 0.3rem;
 }
 。開ける {
     フォントサイズ: 0.22rem;
     色: #12309E;
     位置: 絶対;
     右: 0.2rem;
     下部: 0.1rem;
     フォントの太さ: 太字;
 }
 。近い {
     フォントサイズ: 0.22rem;
     色: #12309E;
     位置: 絶対;
     右: 0.2rem;
     下部: 0.1rem;
     フォントの太さ: 太字;
 }

//ニュースを展開および折りたたみます var objList = $(".wordsContent"); //展開および折りたたみが必要なliタグ要素 var maxNum = 5; //ターゲット値の長さ var arr = []; //展開および折りたたみが必要なすべてのテキスト objList.delegate(".open", "click", function () {
    開く閉じる(true, this)
})
objList.delegate(".close", "click", function () {
    開く閉じる(false, this)
})
// パッケージを初期化します。初期化の目的は、1: Li タグの元のコンテンツを保存すること、2: ターゲット値を超えるテキストを非表示にすることです。function init(objList, maxNum) {
    objList.each(関数(インデックス、項目) {
        arr.push($(item_).text())
        ($(item).text().length > maxNum) の場合 {
            $(item).html($(item).text().substr(0, maxNum) + "<span class='open'>展開<img src='./image/down^.png'/></span>")
        }
    })
}
init(オブジェクトリスト、最大数)

//展開と折りたたみのカプセル化関数 openClose(boo, clickObj) {
    var final = '';
    arr.map(関数(項目、インデックス) {
        if (item.match($(clickObj).parents(".wordsContent").text().substring(0, $(clickObj).parents(".wordsContent").text().length - 2))) {
            最終 = 項目
        }
    })
    もし（ブー）{
        $(clickObj).parents(".wordsContent").html(final + "<span class='close'>收起<img src='./image/up^.png'/></span>")
    } それ以外 {
        $(clickObj).parents(".wordsContent").html(final.substr(0, maxNum) + "<span class='open'>展開<img src='./image/down^.png'/></span>")
    }
}

効果