javascript实现导航栏

来源:互联网 发布:python相关性分析p值 编辑:程序博客网 时间:2024/05/18 19:19

HTML代码:

<div class="box">    <ul class="menu">        <li class="level1">            <a href="#none">衬衫</a>            <ul class="level2">                <li><a href="#none">短袖衬衫</a></li>                <li><a href="#none">长袖衬衫</a></li>                <li><a href="#none">短袖T恤</a></li>                <li><a href="#none">长袖T恤</a></li>            </ul>        </li>        <li class="level1">            <a href="#none">卫衣</a>            <ul class="level2">                <li><a href="#none">开襟卫衣</a></li>                <li><a href="#none">套头卫衣</a></li>                <li><a href="#none">运动卫衣</a></li>                <li><a href="#none">童装卫衣</a></li>            </ul>        </li>        <li class="level1">            <a href="#none">裤子</a>            <ul class="level2">                <li><a href="#none">短裤</a></li>                <li><a href="#none">休闲裤</a></li>                <li><a href="#none">牛仔裤</a></li>                <li><a href="#none">免烫卡其裤</a></li>            </ul>        </li>    </ul></div>

JS实现:

$(document).ready(function(){$(".level1 > a").click(function(){$(this).addClass("current")   //给当前元素添加"current"样式.next().show()                //下一个元素显示.parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式.next().hide();                //它们的下一个元素隐藏return false;});});


原创粉丝点击