添加js脚本后，二级菜单只显示一行空白？-慕课网

添加js脚本后，二级菜单只显示一行空白？

来源：3-1 实现菜单的基本交互

weibo_阿飞去捉小蝴蝶_0

2017-05-23 18:35

$(document).ready(function() {
 var sub = $("#sub")
 //变量sub =子菜单
 var activeRow
 //变量activeRoe为激活的一级菜单中的行
 var activeMenu
 //变量activeMenu与之对应的二级菜单
 $("#test")
 //一级菜单
  .on('mouseenter',function(e){
   sub.removeClass('none')
  })
  // 鼠标移至时去除sub的none类属性-可见

  .on('mouseleave',function(e){
   sub.addClass('none')
  // 鼠标移出时添加sub的none类属性-不可见
   if (activeRow) {
    //如果存在一级菜单激活
    activeRow.removeClass('active')
    //去除样式一级菜单的active样式
    activeRow = null
   }
   if (activeMenu) {
    //如果存在二级菜单激活
    activeMenu.addClass('none')
    //给二级菜单添加none样式
    activeMenu = null
   }
  })
  .on('mouseenter','li',function(e) {
   //鼠标移动到li上
   if(!activeRow) {
    //如果没有激活的列表项
    activeRow = $(e.target).addClass('active')
    activeMenu = $('#' + activeRow.data('id'))
    activeMenu.removeClass('none')
    return
   }
  })
})

写回答关注

3回答

zhang789018: 2017-05-30 10:18:49

是内部元素<dt>test</dt>没有显示，

if (!activityRow) {
console.log(e.target);
activityRow = $(e.target).addClass('active');
console.log(activityRow.data('id'));
activityMenu = $('#' + activityRow.data('id'));
console.log(activityMenu);
activityMenu.removeClass('none');
return
}

看看target是什么元素？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!--规定文档的字符编码。-->

    <title>让知识更有价值</title>
    <meta name="renderer" content="webkit"><!--默认webkit内核-->

    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp"><!--源于百度禁止转码-->
    <meta name="Keywords" content="天一块">
    <meta name="Description"
          content="天一块`1是付费只是">
    <style type="text/css">
        /*清除掉基本样式*/
        * {
            margin: 0;
            padding: 0
        }

        #header {
            height: 30px;
            width: 100%;
        }

        ul {
            padding: 15px 0;
            margin: 0;
            list-style: none; /* 去除无序列表原点*/
            background: beige;
            width: 100px;
            color: salmon;
        }

        li {
            display: block;
            cursor: pointer;
        }

        li.active {
            background-color: dimgray;
        }

        a {
            text-decoration: none; /*去掉下划线*/
            display: block
        }

        a:hover {
            color: aliceblue;
            background: royalblue;
        }

        .aIndex {
            background-color: royalblue;
        }

        .wrap {
            position: relative;
            width: 200px;
            left: 50px;
            top: 50px;

        }

        #sub {

            width: 600px;
            position: absolute;
            border: 1px solid #f34;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
            left: 200px;
            top: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 10px;
        }

        .sub_content {
            font-size: 20px;
        }

        .none {
            display: none;
        }

        .sub_content dl {
            overflow: hidden;
        }

        .sub_content dt {
            float: left;
            width: 70px;
            clear: left;
            font-weight: bold;
            position: relative;
        }

    </style>

</head>
<body id="index">

<div id="header">
    <a href="http://www.imooc.com/" target="_self" class="hide-text" title="首页"><img src=""></a>
</div>


<div id="main">
    <div class="wrap" id="test">
        <ul>
            <li data-id="a"><a class="aIndex" data-id="a" href="#">java</a></li>
            <li><a href="#">c</a></li>
            <li><a href="#">python</a></li>
            <li><a href="#">white cold drink</a></li>
        </ul>
        <div id="sub" class="none">
            <div id="a" class="sub_content none">
                <dl>
                    <dt>test</dt>
                </dl>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript" src="./t1bao/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var sub = $("#sub");
        var activityRow;
        var activityMenu;
        $("#test").on('mouseenter', function (e) {
            sub.removeClass('none');

        }).on('mouseleave', function (e) {
            sub.addClass('none');
            if (activityRow) {
                activityRow.removeClass('active');
                activityRow = null;
            }
            if (activityMenu) {
                activityMenu.removeClass('none');
                activityMenu = null;
            }
        }).on('mouseenter', 'li', function (e) {


            if (!activityRow) {
                console.log(e.target);
                activityRow = $(e.target).addClass('active');
                console.log(activityRow.data('id'));
                activityMenu = $('#' + activityRow.data('id'));
                console.log(activityMenu);
                activityMenu.removeClass('none');
                return
            }
            activityRow.removeClass('active');
            activityMenu.removeClass('none');
            activityRow = $(e.target);
            activityRow.addClass('active');
            activityMenu =$('#' + activityRow.data('id'));
            activityMenu.removeClass('none');
        })
    })
</script>
</body>
</html>

0 0

三十分的昼夜

2017-05-28 13:25:44

<div id="sub" class="none">
<div id="a" class="sub_context none">
把二级菜单的data-id 改为id

0 0
海带妹

2017-05-24 01:10:25

activeRow.removeClass('active')
activeMenu.addClass('none')

activeRow=$(e.target)
activeRow.addClass('active')
activeMenu=$('#'+activeRow.data('id'))
activeMenu.removeClass('none')
})
})

0 0

JS实现京东无延迟菜单效果

JS模拟京东商城无延迟菜单效果，学习菜单结构和样式处理

57661 学习 · 138 问题

查看课程

相似问题

bug:二级菜单为空白

回答 1

二级菜单显示问题

回答 4

二级菜单不能显示

回答 1

二级菜单显示不了？

回答 2

二级菜单存在空白容器，怎么回事呢

回答 2

打开慕课网App查看更多内容