원본 JAVASCRIPT를 사용하여 5개의 LI 중 일부만 표시하고 클릭하면 나머지는 표시하는 방법은 무엇입니까?

Question

코드는 다음과 같습니다.

으아아아

위 내용은 JQUERY가 아닌 JAVASCRIPT를 사용하여 5개의 링크만 표시하고 나머지는 숨기는 방법입니다. 표시하려면 그림이나 텍스트를 클릭한 다음 클릭하여 숨깁니다. 이 기능을 어떻게 달성할 수 있나요?

현재 표시되는 항목:

나는 링크 1
나는 링크 2
나는 링크 3
나는 링크 4
나는 링크 5
...
나는 링크 10

표시하려는 효과:

나는 링크 1입니다
나는 링크 2입니다
나는 링크 3입니다
나는 링크 4
나는 링크 5입니다
︿ //나머지 "나는 링크 6-10입니다"를 확장하려면 여기를 클릭한 다음 "나는 링크 6-10입니다"를 숨기려면 클릭하세요 링크 "6-10"입니다.

Answer 1

멍청한 비동기식 요청에 대해 이야기해 보겠습니다. 먼저 필요한 것만 로드하고 버튼을 클릭하여 나머지를 요청한 후 페이지에 동적으로 로드합니다. 클릭 숨기기를 위해 새로 추가된 li에 클래스를 추가합니다.

으아아아

코드가 좀 보기 흉한데 양해 부탁드립니다.(jquery api 사용)

Answer 2

위 답변을 읽어보니 제 생각은 아닌 것 같습니다. 여기서 제 생각을 이야기해 보겠습니다. 으아아아 으아아아

loadNode()를 호출할 때마다 생성할 li 개수를 매개변수로 전달하면 동적으로 생성할 수 있습니다

Answer 3

무슨 말씀인지 잘 모르겠습니다

css:
li에 대해 예약된 클래스 이름을 설정합니다(예: .hide {display:none})
이제 다음 li 클래스에 hide를 추가하세요

js:
클릭 이벤트를 사용하여 숨김 여부를 확인하고 상황에 따라 클래스를 삭제하거나 추가합니다.

아마 이 길이겠죠.

Answer 4

<button onclick="toggle_fn()">토글 버튼</button>

<스크립트>

으아아아

</script>

Answer 5

아이디어는 ul Overflow:hidden을 허용한 다음 높이를 변경하는 것입니다.

초안 작성 https://jsfiddle.net/straybug...