Native js implements the news list to expand/collapse the full-text function, and js News list

Native js implements the news list to expand/collapse the full-text function, and js News list

Knowledge points

1. The implementation principle is very simple. by clicking the tag, you can set the display attribute of the div to hide or display,

It is mainly about dom operations.

2. dom operations:

ParentNode obtains the parent Element

NextSibling

Previussibling

3. Notes:

Consider that when you click to expand the full text, other expanded full text will be collected.

When nextSibling is used to obtain the next node, different browsers may have different judgments.

Some get elements, some get line breaks or spaces, so here we need to use nodeType to determine whether the data type nodeType only returns numbers 1, 2, 3

The element node is obtained only when 1 is returned.

(I didn't take this issue into consideration when I did it. I thought it was a long time ago)

In addition, js does not have dom operations like getting all elements of the same level in jquery, so I wrote a siblings (elm)

It can also be used in the future.

Complete code

<! DOCTYPE html> 
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!