2条回答 默认 最新
- 天际的海浪 2018-11-10 09:09关注
很简单。只要把点击事件改到三角上即可
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> 页面名称 </title> <style type="text/css"> #menu li { list-style-type: none; margin-left: 20px; } #menu ul { margin: 0; padding: 0; } #menu .mg { width: 20px; height: 20px; font-style: 20px; line-height: 20px; text-align: center; display: inline-block; margin-left: -20px; } #menu .on { transform: rotate(90deg); } #menu>ul ul { display: none; } </style> </head> <body> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <div id="menu"> <ul> <li><a href="p1.html">菜单 1</a></li> <li><span class="mg">></span><a href="p2.html">菜单 2</a> <ul> <li><span class="mg">></span><a href="p2-1.html">菜单 2-1</a> <ul> <li><a href="p2-1-1.html">菜单 2-1-1</a></li> <li><a href="p2-1-2.html">菜单 2-1-2</a></li> </ul> </li> <li><a href="p2-2.html">菜单 2-2</a></li> <li><a href="p2-3.html">菜单 2-3</a></li> </ul> </li> <li><span class="mg">></span><a href="p3.html">菜单 3</a> <ul> <li><a href="p3-1.html">菜单 3-1</a></li> <li><a href="p3-2.html">菜单 3-2</a></li> <li><a href="p3-3.html">菜单 3-3</a></li> </ul> </li> <li><a href="p4.html">菜单 4</a></li> </ul> </div> <script type="text/javascript"> $(function(){ $("#menu").on("click", ".mg", function(event){ $(this).toggleClass("on").next().next().toggle(); }); }); </script> </body> </html>```
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决评论 打赏 举报无用 1
悬赏问题
- ¥15 数学的三元一次方程求解
- ¥20 iqoo11 如何下载安装工程模式
- ¥15 本题的答案是不是有问题
- ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
- ¥15 C++使用Gunplot
- ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
- ¥15 matlab数字图像处理频率域滤波
- ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
- ¥15 ELGamal和paillier计算效率谁快?
- ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题