二级菜单，移入显示隐藏

最新推荐文章于 2023-06-26 16:17:31 发布

struggling888

最新推荐文章于 2023-06-26 16:17:31 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css权威指南-第三版文章标签：二级菜单-导航条

本文链接：https://blog.youkuaiyun.com/struggling888/article/details/72478509

css权威指南-第三版专栏收录该内容

2 篇文章

订阅专栏

二级菜单

<!DOCTYPE html>
<html>
  <head>
    <title>京东菜单</title>
    <style>
     .none{display:none;}
     .act{background:#999395;}
      #wrap{
        position:relative;
        left:0;
        top:20px;
        width:200px;
      }
      #wrap ul{
        background:#6e6568;
        padding:0;
      }
      #wrap ul li{
        display:block;
        height:30px;
        width:200px;
        color:#fff;
        text-align:center;
        line-height:30px;
      }      
      .one li span:hover{color:red;}
       #sub{
        width:700px;
        background:#eee;
        height:200px;
        position:absolute;
        top:0px;
        left:200px;
      }  
</style>
<script src="jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <div id="wrap">
      <ul class="one">
        <li data-id="1" ><span>家用电器</span></li>
        <li data-id="2"><span>手机/运营商/数码</span></li>
        <li data-id="3"><span>电脑/办公</span></li>
        <li data-id="4"><span>家居/家具/家装/厨具</span></li>
        <li data-id="5"><span>男装/童装/女装</span></li>
        <li data-id="6"><span>美妆个护/宠物</span></li>
        <li data-id="7"><span>女鞋/箱包/珠宝/钟表</span></li>
        <li data-id="8"><span>男鞋/运动/户外</span></li>
        <li data-id="9"><span>汽车/汽车用品</span></li>
        <li data-id="10"><span>母婴/玩具乐器</span></li>
        <li data-id="11"><span>食品/酒类/生鲜</span></li>
      </ul>
  <div id="sub" class="none">
    <div id="1" class="sub_cont none">家用电器</div>
    <div id="2" class="sub_cont none">手机/运营商/数码</div>
    <div id="3" class="sub_cont none">电脑/办公</div>
    <div id="4" class="sub_cont none">家居/家具/家装/厨具</div>
    <div id="5" class="sub_cont none">男装/童装/女装</div>
    <div id="6" class="sub_cont none">美妆个护/宠物</div>
    <div id="7" class="sub_cont none">女鞋/箱包/珠宝/钟表</div>
    <div id="8" class="sub_cont none">男鞋/运动/户外</div>
    <div id="9" class="sub_cont none">汽车/汽车用品</div>
    <div id="10" class="sub_cont none">母婴/玩具乐器</div>
    <div id="11" class="sub_cont none">食品/酒类/生鲜</div>
  </div>
</div>
<script>
$(function(){
  var activeRow;
  var activeMun;
  $(".one li").on(" mouseover",function(e){
   $(this).addClass("act");
   $("#sub").removeClass("none");
   var arr=$(this).attr("data-id");
   $("#sub div").eq(arr-1).removeClass("none");
    $("#sub div").eq(arr-1).siblings().addClass("none");

  })
  .on("mouseout",function(e){
    $(this).removeClass("act");
    $("#sub").addClass("none");
  })
});     
</script>
  </body>
</html>