(编辑:jimmy 日期: 2024/10/11 浏览:2)
一、实现效果
1.初始化效果:未添加样式和特效
2、添加CSS样式
3、最终效果
二、JQuery代码
<!--编写JQuery代码--> <script type="text/javascript"> $(document).ready(function(){ $(".level>a").click(function(){ $(this).addClass("current") //给当前元素添加current样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式 .next().hide(); //他们的下一个元素隐藏 return false; }) }) </script>
三、完整代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <title>JQuery制作导航栏</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-...min.js">