js实现简单折叠、展开菜单的方法

2024-09-28 08:45:33

本文实例讲述了js实现简单折叠、展开菜单的方法。分享给大家供大家参考。具体如下：

这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，CSS没有做美化，如果想用的朋友就自己美化吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/

具体代码如下：

<html>
<script>
function show(c_Str)
{if(document.all(c_Str).style.display=='none')
{document.all(c_Str).style.display='block';}
else{document.all(c_Str).style.display='none';}}
function high(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="336699"
event.srcElement.style.color="white"
}
}
function low(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="99CCFF"
event.srcElement.style.color=""
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>导航栏</title>
<style>
td { cursor: hand; font-family: Tahoma; background-color: #336699; color: #99CCFF; font-size: 10pt }
li{ color: #FF0000; font-family: Tahoma; background-color: #99CCFF; font-size: 9pt}
.up{ background-color: #3A6EA5; border-left: 1 solid #A6C1DF;border-right: 1 solid #002200; border-top: 1 solid #A6C1DF; border-bottom: 1 solid #002200 }
</style>
</head>
<body topmargin="0" leftmargin="5">
<div align="left">
 <table border="0" width="48" cellspacing="0" cellpadding="0">
 <tr>
  <td><div class=up onclick=show("a0")>+01-10</div><div onmouseover=high() onmouseout=low() id=a0 style="display:none">
<li class=k>01</li>
<li class=k>02</li>
<li class=k>03</li>
<li class=k>04</li>
<li class=k>04</li>
<li class=k>05</li>
<li class=k>06</li>
<li class=k>07</li>
<li class=k>08</li>
<li class=k>09</li>
<li class=k>10</li>
  </div></td>
 </tr>
 <tr>
  <td><div class=up onclick=show("a1")>+11-20</div><div onmouseover=high() onmouseout=low() id=a1 style="display:none">
<li class=k>11</li>
<li class=k>12</li>
<li class=k>13</li>
<li class=k>14</li>
<li class=k>15</li>
<li class=k>16</li>
<li class=k>17</li>
<li class=k>18</li>
<li class=k>19</li>
<li class=k>20</li>
  </div></td>
 </tr>
 <tr>
  <td><div class=up onclick=show("a2")>+21-30</div><div onmouseover=high() onmouseout=low() id=a2 style="display:none">
<li class=k>21</li>
<li class=k>22</li>
<li class=k>23</li>
<li class=k>24</li>
<li class=k>25</li>
<li class=k>26</li>
<li class=k>27</li>
<li class=k>28</li>
<li class=k>29</li>
<li class=k>30</li>
  </div></td>
 </tr>
   <tr>
  <td><div class=up onclick=show("a3")>+31-40</div><div onmouseover=high() onmouseout=low() id=a3 style="display:none">
<li class=k>31</li>
<li class=k>32</li>
<li class=k>33</li>
<li class=k>34</li>
<li class=k>35</li>
<li class=k>36</li>
<li class=k>37</li>
<li class=k>38</li>
<li class=k>39</li>
<li class=k>40</li>
  </div></td>
 </tr>
  <tr>
  <td><div class=up onclick=show("a4")>+41-50</div><div onmouseover=high() onmouseout=low() id=a4 style="display:none">
<li class=k>41</li>
<li class=k>42</li>
<li class=k>43</li>
<li class=k>44</li>
<li class=k>45</li>
<li class=k>46</li>
<li class=k>47</li>
<li class=k>48</li>
<li class=k>49</li>
<li class=k>50</li>
  </div></td>
 </tr>
   <tr>
  <td><div class=up onclick=show("a5")>+51-60</div><div onmouseover=high() onmouseout=low() id=a5 style="display:none">
<li class=k>51</li>
<li class=k>52</li>
<li class=k>53</li>
<li class=k>54</li>
<li class=k>55</li>
<li class=k>56</li>
<li class=k>57</li>
<li class=k>58</li>
<li class=k>59</li>
<li class=k>60</li>
  </div></td>
 </tr>
  <tr>
  <td><div class=up onclick=show("a7")>+61-70</div><div onmouseover=high() onmouseout=low() id=a7 style="display:none">
<li class=k>61</li>
<li class=k>62</li>
<li class=k>63</li>
<li class=k>64</li>
<li class=k>65</li>
<li class=k>66</li>
<li class=k>67</li>
<li class=k>68</li>
<li class=k>69</li>
<li class=k>70</li>
  </div></td>
 </tr>
  <tr>
  <td><div class=up onclick=show("a8")>+71-80</div><div onmouseover=high() onmouseout=low() id=a8 style="display:none">
<li class=k>71</li>
<li class=k>72</li>
<li class=k>73</li>
<li class=k>74</li>
<li class=k>75</li>
<li class=k>76</li>
<li class=k>77</li>
<li class=k>78</li>
<li class=k>79</li>
<li class=k>80</li>
  </div></td>
 </tr>
 </table>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

原生js实现新闻列表展开/收起全文功能

知识要点 1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示, 主要是对dom操作的掌握. 2.需要用到的dom操作: parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previousSibling获取上一个紧跟的节点 3.注意事项: 要考虑到当点击展开全文的时候,其他已经展开的全文要收起来. 当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType
js实现选项卡内容切换以及折叠和展开效果【推荐】

1.选项卡效果预览 2.源码与简要说明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换选项卡功能实现</title> <link rel="stylesheet" href="css/switchTab.css" /> </head> <body> <div
JS实现鼠标滑过折叠与展开菜单效果代码

本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC
JavaScript实现兼容IE6的收起折叠与展开效果实例

本文实例讲述了JavaScript实现兼容IE6的收起折叠与展开效果.分享给大家供大家参考,具体如下: 收起折叠效果本身不难,但是div是否超出高度不应该利用innerHTML去判断,收起折叠的时候把所有div的innerHTML搞到一个变量又把一个变量的内容通过截取字符串的方式,又将其放到div.下面提供一种通过div本身固有的高度来判断div是否过高,如果过高则提供折叠收起的按钮. div的高度通过document.getElementById("div的id").offsetHe
JS+CSS实现的简单折叠展开多级菜单效果

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如
自己写了一个展开和收起的多更能型的js效果

先来看看效果: 具体的功能是: 1.页面上面最多只有一个是显示全部内容的. 2.当自己处于全部显示的时候,点击自己的收起,自己收起. 3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开" 而被点击的选项则内容全部显示,"展开"变为"收起" ================================================= 部分代码: =====================
JS实现可展开折叠层的鼠标拖曳效果

本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果.分享给大家供大家参考.具体如下: 这是一款简单JS代码实现的鼠标拖曳图层效果,比较精简,大家参考一下.鼠标点击层标题栏可实现层内容的展开与折叠,按住标题栏可实现层的拖动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fade-out-mouse-draw-style-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
JavaScript控制网页层收起和展开效果的方法

本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q
一个封装js代码-----展开收起效果示例

第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi
慢慢展开再慢慢收起的javascript广告效果

我们效果代码 *{margin:0;padding:0;} body {height:2000px;} #menu { width:220px; height:420px; position:absolute; z-index:1000; background:url(/upload/20080421090108362.gif) repeat-x top left; } #menu_h { float:right; } #menu_h img { cursor:pointer; } #menu
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系,

js实现简单折叠、展开菜单的方法

相关推荐

随机推荐