Click the show menu drop-down menu

It is common in account management and other locations after logon. It is hidden by default. The drop-down details are displayed after you click it.

Demo

 

XML/HTML Code

1. <Div style = 'margin: 50px '>
3. <Div class = "dropdown">
4. <A class = "account">
5. <Span> My Account </span>
6. </A>
7. <Div class = "submenu" style = "display: none;">
9. <Ul class = "root">
10. Li>
11. <A href = "# Dashboard"> Dashboard </a>
12. </Li>
15. <Li>
16. <A href = "# Profile"> Profile </a>
17. </Li>
18. <Li>
20. <A href = "# settings"> Settings </a>
21. </Li>
24. <Li>
25. <A href = "# feedback"> Send Feedback </a>
26. </Li>
30. <Li>
31. <A href = "# signout"> Sign Out </a>
32. </Li>
33. </Ul>
34. </Div>
35. </Div>
37. </Div>

 

JavaScript Code

1. <Script type = "text/javascript">
2. $ (Document). ready (function ()
3. {
4. $ (". Account"). click (function ()
5. {
6. Var X = $ (this). attr ('id ');
8. If (X = 1)
9. {
10. $ (". Submenu"). hide ();
11. $ (This). attr ('id', '0 ');
12. }
13. Else
14. {
16. $ (". Submenu"). show ();
17. $ (This). attr ('id', '1 ');
18. }
20. });
22. // Mouseup textarea false
23. $ (". Submenu"). mouseup (function ()
24. {
25. Return false
26. });
27. $ (". Account"). mouseup (function ()
28. {
29. Return false
30. });
33. // Textarea without editing.
34. $ (Document). mouseup (function ()
35. {
36. $ (". Submenu"). hide ();
37. $ (". Account"). attr ('id ','');
38. });
40. });
42. </Script>

 

Address: http://www.freejs.net/article_daohangcaidan_134.html