Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to write JavaScript to realize the display and hiding of drop-down menu". In daily operation, I believe that many people have doubts about how to write JavaScript to achieve the display and hiding of drop-down menu. the editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to write JavaScript to achieve the display and hiding of drop-down menu". Next, please follow the editor to study!

The details are as follows

Sometimes you need this page effect:

Implement the drop-down menu when you move the mouse over the element

After the mouse moves away from the element, the drop-down menu disappears

Realization idea

1. A box contains upper and lower parts, and the following part is a submenu, which is first set to hidden: display: none

2. When the mouse moves over the box and triggers the event---onmouseover, the displayvalue of the facial molecular menu set by js is---block, so that the submenu is displayed

3. Move the mouse away from the box: trigger the event---onmouseout, and js sets the displayvalue of the facial molecular menu to---none, making the submenu hidden again.

4. change the font color, background color and other styles according to the needs.

Code sample operation element-Sina drop-down menu * {margin: 0; padding: 0; box-sizing: border-box;} ul li {list-style: none;} a {text-decoration: none Color: # 4c4c4c;} a:hover {color: # e88415;} .box {width: 80px; margin: 50px auto; font-size: 14px; color: # 4c4c4c;} .Weibo {position: relative Background-color: # fcfcfc;} .Weibo a {display: block; height: 40px; line-height: 40px; padding-left: 20px;} .change {color: # f9a74f; background-color: # edeef0 } I {position: absolute; top: 50%; right: 15px; margin-top:-4px; width: 5px; height: 5px; border-bottom: 1px solid orangered; border-right: 1px solid orangered; transform: rotate (45deg) } .WeiboList {display: none;} .WeiboList li a {display: block; width: 80px; height: 33px; line-height: 33px; padding-left: 15px; border-bottom: 1px solid # fecc5b; background-color: # fff } .WeiboList li a:hover {background-color: # fff5da;} Weibo private comments @ I var box = document.querySelector ('.box'); var weibo = document.querySelector ('.weibo') Var weiboList = document.querySelector ('.WeiboList'); box.onmouseover = function () {weibo.className = 'weibo change' weiboList.style.display =' block';} box.onmouseout = function () {weibo.className = 'weibo'; weiboList.style.display =' none';}

Page effect:

At this point, the study on "how to write JavaScript to achieve the display and hiding of drop-down menus" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.