js实现简单折叠、展开菜单的方法-js教程-PHP中文网

首页

web前端

js教程

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

PHPz

May 16, 2016 pm 03:41 PM

js 展开折叠菜单

这篇文章主要介绍了js实现简单折叠、展开菜单的方法,涉及javascript动态操作页面元素变换的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下，具体如下：

这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，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==&#39;none&#39;)
{document.all(c_Str).style.display=&#39;block&#39;;}
else{document.all(c_Str).style.display=&#39;none&#39;;}}
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">
<p align="left">
 <table border="0" width="48" cellspacing="0" cellpadding="0">
 <tr>
  <td><p class=up onclick=show("a0")>+01-10</p><p 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>
  </p></td>
 </tr>
 <tr>
  <td><p class=up onclick=show("a1")>+11-20</p><p 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>
  </p></td>
 </tr>
 <tr>
  <td><p class=up onclick=show("a2")>+21-30</p><p 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>
  </p></td>
 </tr>
   <tr>
  <td><p class=up onclick=show("a3")>+31-40</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a4")>+41-50</p><p 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>
  </p></td>
 </tr>
   <tr>
  <td><p class=up onclick=show("a5")>+51-60</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a7")>+61-70</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a8")>+71-80</p><p 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>
  </p></td>
 </tr>
 </table>
</p>
</body>
</html>

登录后复制

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1673

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

谷歌 Pixel 9 Pro Fold 手机壳曝光：外屏 6.4 英寸、内屏 8.02 英寸 Jun 25, 2024 pm 02:35 PM

6月25日消息，消息源ytechb昨日（6月24日）发布博文，分享了谷歌Pixel9ProFold手机壳渲染图，再次展示了这款折叠屏背面的设计。此前消息，谷歌将于今年10月发布Pixel9系列手机，除了Pixel9系列三款手机之外，PixelFold也纳入到Pixel9系列中，正式上架后名称为Pixel9ProFold。本次曝光的手机壳来自配件厂商Torro，该公司的英国和美国在线商店已经列出了该产品手机壳，并披露了这款手机的设计和显示屏尺寸。页面中展示了大量Pixel9ProFold手机壳渲染

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

三星Galaxy Z Flip 6机模首曝：边框更窄折痕依然存在 Jun 22, 2024 am 03:28 AM

6月21日消息，近日，外媒在网络上放出了三星GalaxyZFlip6的机模照片。根据图片可以了解到，三星GalaxyZFlip6的边框将进一步收窄，这意味着手机在折叠状态下的宽度可能会减小，也将会提供更舒适的握持感和便携性。而且，GalaxyZFlip6的机模相比上一代ZFlip5，整机显得更加方正一些，背面的摄像头模块也要更加突出，预计是采用了新的相机传感器。不过，从正面看上去，手机的折痕依然比较明显，但考虑到泄露的是模型机，与真机可能会会有些许差距，因此仅供参考。在性能配置方面，Galaxy

三星万元折叠机皇W25曝光：500万像素屏下前摄机身更薄了 Aug 23, 2024 pm 12:43 PM

8月23日消息，三星即将推出新款折叠手机W25，预计9月底亮相，将在屏下前摄、机身厚度上作出相应的提升。据报道，三星W25代号为Q6A，将配备500万像素屏下摄像头，相较于GalaxyZFold系列的400万像素摄像头有所提升。此外，W25的外屏前置摄像头和超广角摄像头预计分别为1000万和1200万像素。在设计上，W25折叠状态下的厚度约为10毫米，比标准版GalaxyZFold6薄约2毫米。屏幕方面，W25的外屏为6.5英寸，内屏为8英寸，而GalaxyZFold6的外屏为6.3英寸，内屏为

IDC 预估 2024 全球智能手机出货量 12 亿部：折叠屏 2500 万部，同比增长 37% Feb 24, 2024 pm 02:20 PM

2月24日消息，IDC近日发布市场研究报告，预估2024年全球智能手机出货量将达到12亿部，同比增长2.8%，随后到2028年将保持较低的个位数增长。IDC认为2024年总体出货量仍低于大流行前的水平，但全球智能手机市场已经走出低谷，开始呈现复苏上扬趋势。IDC认为推动整体市场复苏的两个关键因素，其一是设备更新周期，其二新兴市场需求的增长。另外还有两个主要驱动力，IDC预估折叠屏手机2024年出货量将达到2500万部，同比增长37%；另外就是人工智能（AI）已迅速成为智能手机讨论的一部分，引发了

折叠屏手机最大短板：没有核心应用场景 Mar 16, 2024 am 09:04 AM

我们今天探讨的并非某一款产品到底怎么样，而是回归到“折叠屏”话题本身上来，探究一下折叠屏手机的“合理性”。首先还是看一看折叠屏手机的市场表现，根据IDC最新数据报告显示，2023年全年中国折叠屏手机市场出货量约700.7万台，同比增长114.5%。其中，2023年第四季度中国折叠屏手机市场出货量约277.1万台，同比增长149.6%，数据看上去确实还不错，增长也很强势。不过与2023年中国市场智能手机2.7亿左右出货量相比，这个数据就着实不太够看了。总的来说

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题