Home > Developer > JavaScript
Today, we use javascript to implement the Baidu Input Method drop-down menu.
Demo: http://cssplusplus.com/demo/js/2_1_baiduInput0.html
Source code:
01 <! DOCTYPE html>
02 03 04
05 <style>
06 * {margin: 0px; padding: 0px ;}
07 # outer {width: 70px; margin: 10px auto; font: 12px/1.5 Tohoma ;}
08 # menu li {list-style-type: none ;}
09 li # close {border-top: 1px solid # 9A99FF ;}
10 # menu {margin: 6px 0px; border: 1px solid # 9A99FF; width: 68px; display: none ;}
11 # menu li a {text-decoration: none; display: block; color: # 0000CC; padding: 4px 4px ;}
12 # menu li a: hover {background: # D9E1F6 ;;}
13
14
15 </style>
16
17 <script>
18 window. onload = function (){
19 var obtn = document. getElementsByTagName ("button") [0];
20 var omenu = document. getElementById ("menu ");
21 omenu. style. display = "none ";
22 obtn. onclick = function (){
23 if (omenu. style. display = "none "){
24 omenu. style. display = "block ";
25} else {
26 omenu. style. display = "none ";
27}
28}
29}
30 </script>
31
32 33 <body>
34 <div id = "outer">
35 <button> Input Method </button>
36 <ul id = "menu">
37 <li> <a href = "#"> handwriting </a> </li>
38 <li> <a href = "#"> pinyin </a> </li>
39 <li id = "close"> <a href = "#"> close </a> </li>
40 </ul>
41 </div>
42 </body>
43 Note that if there are no 21 rows of statements:
1 omenu. style. display = "none ";
Omenu. style. display will be equal to a null value. Then, click the button. if it is determined for the first time, it will be false to enter the else statement so that omenu. style. display = "none ". In other words, you must click twice at the first click to make the menu appear.
In javascript, the style method is used for objects, and the style in css is not modified, but the style can be refreshed with the highest priority.
Author: Li yuhao
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
