オリジナルの JAVASCRIPT を使用して 5 つの LI の一部のみを表示し、クリックすると残りを表示するにはどうすればよいですか?

Question

コードは以下のように表示されます:

リーリー

上記は HTML の構造です。JAVASCRIPT (JQUERY ではありません) を使用して 5 つのリンクのみを表示し、残りを非表示にする方法です。画像またはテキストをクリックして表示し、クリックして非表示にする必要があります。どうすればこの機能を実現できますか?

現在表示されている:

私はリンク 1
私はリンク 2
私はリンク 3
私はリンク 4
私はリンク 5
...
私はリンク 10

表示したい効果:

私はリンク 1
私はリンク 2
私はリンク 3
私はリンク 4
私はリンク 5
︿ //ここをクリックして残りの「私は」を展開しますリンク「6-10」をクリックして「私はリンク 6-10」を非表示にします。

Answer 1

愚かな方法である非同期リクエストについて話しましょう。最初に必要なものだけをロードし、ボタンをクリックして残りをリクエストし、それをページに動的にロードします。新しく追加した li にクリック非表示用のクラスを追加します。

リーリー

コードはかなり醜いですが、ご容赦ください（jquery APIを使用）

Answer 2

上記の回答を読んだ後、それが私の考えではないと思いますが、ここで私の考えについて話しましょう。 リーリー リーリー

loadNode()を呼び出すたびに、生成するliの数をパラメータとして渡すことで動的に生成できます

Answer 3

何を言っているのかよくわかりません

css:
.hide {display:none} などの li の予約クラス名を設定します
次に、次の li クラスに Hide を追加します

js:
クリックイベントをトリガーにして非表示の有無を判断し、状況に応じてクラスの削除やクラスの追加を行います。

おそらくこれがルートです。

Answer 4

<ボタン onclick="toggle_fn()">トグル ボタン</button>

<スクリプト>

リーリー

</スクリプト>

Answer 5

そのアイデアは、ul overflow:hidden を実行してから高さを変更することです。

下書きを書きました https://jsfiddle.net/straybug...