jQuery学习 (实现内联下拉菜单效果(一个小test)
1:主要学习实现这种菜单的方法之一
结构:<ul>
<li>
<span>菜单1</span>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li>
<span>菜单2</span>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
<style type="text/css"> ul li{ background-color: aquamarine; float: left; margin-left: 5px; } li ul, li ul li{ background-color: pink; text-indent: 30px; } li ul li{ float: none; } </style> <script> $(function () { $("#one").mousemove(function () { $("#one_ul").css("display","block"); }).mouseout(function () { $("#one_ul").css("display","none"); }); $("#tow").mousemove(function () { $("#tow_ul").css("display","block"); }).mouseout(function () { $("#tow_ul").css("display","none"); }); $("#thr").mousemove(function () { $("#thr_ul").show(600);//如果调用 show 或者hide 就会出现动画效果 慢慢显示或者慢慢消失的效果 与什么直接设置css的方式对比 }).mouseout(function () { $("#thr_ul").hide(400); }); }) </script> </head> <body> <div class="warp"> <ul> <li> <h2 id="one">第一个标签选择</h2> <ul id="one_ul" style="display:none"> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> <li>ul li1 ul li1</li> </ul> </li> <li> <h2 id="tow">第二个标签选择</h2> <ul id="tow_ul" style="display:none"> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> <li>ul li2 ul li2</li> </ul> </li> <li> <h2 id="thr">第三个标签选择</h2> <ul id = thr_ul style="display:none"> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> <li>ul li3 ul li3</li> </ul> </li> </ul> </div> </body> </html>
坚持
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步