请问这个错误怎么解决

请问这个错误怎么解决

https://img1.sycdn.imooc.com//climg/6221928309f8a4d819750510.jpg

https://img1.sycdn.imooc.com//climg/6221928e09cf43db09700489.jpg

// 垂直菜单的实现
(function () {
    // 得到所有菜单触碰项li标签
    var menu_lis = document.querySelectorAll('#v-menu li[data-n]');
    // 得到vmenubox盒子
    var vmenubox = document.querySelector('#v-menu-box');
    // 得到所有menu菜单
    var menus = document.querySelectorAll('#menus .menu');

    // 批量添加监听
    for (var i = 0; i < menu_lis.length; i++) {
        (function (i) {
            // 鼠标触碰某个菜单项
            menu_lis[i].onmouseenter = function () {
                // 所有菜单项去掉active类
                for (var j = 0; j < menus.length; j++) {
                    menu_lis[j].className = '';
                }
                // 自己加active类
                this.className = 'active';
                // 让所有菜单隐藏,去掉active类
                for (var j = 0; j < menus.length; j++) {
                    menus[j].className = 'menu';
                }
                // 让序号相同的菜单项添加menu类
                menus[i].className = 'menu active';
            }
        })(i)
    }
    // 鼠标离开整个vmenubox盒子
    vmenubox.onmouseleave = function () {
        // 让所有菜单隐藏
        for (var j = 0; j < menus.length; j++) {
            menus[j].className = 'menu';
        }
        // 所有菜单项去掉active类
        for (var j = 0; j < menus.length; j++) {
            menu_lis[j].className = '';
        }
    }
})();


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小李 2022-03-04 13:34:43

同学你好,报错上来看是,无法设置未定义的属性。同学在js中打印一下menu_lis,看看是否获能正常获取到。另外可以去检查一下art文件中是不是结构上有问题或类名、id是否设置与课程中老师的一样。如果同学js部分按照视频中的来,art文件中命名按照自己的来,那么就会出现这样的问题。祝学习愉快!

  • 提问者 情分的小前端 #1

    我用ajax获取数据后就这样了

    <nav class="v-menu" id="v-menu">
        <ul>
          {{each items}}
          <li data-n="{{$value.key}}">
            <div class="inn">
              <div class="t">{{$value.title}}</div>
              <div class="e">
                {{each $value.subTitles}}
                <em>{{$value}}</em>
                {{/each}}
              </div>
            </div>
          </li>
          {{/each}}
        </ul>
      </nav>


    2022-03-04 14:07:47
  • 提问者 情分的小前端 #2

    奇怪的是有时候他能用我刷新页面之后,他就不能用了,然后我把控制台打开他又能用了

    2022-03-04 14:47:01
  • 同学你好,这个大概率是因为js阻塞造成的,因为我看同学在最初给到的代码js还没有导出使用,这里就会发生这样的问题。比如说有的时候能用有的使用不能用,这是因为有的时候ajax获取完数据前,menu.js已经走完了。如下

    https://img1.sycdn.imooc.com//climg/6221b71c09d87af609360283.jpg

    所以这里的解决方案应该是吧menu.js 导出出去。在index.js中当获取完数据后在调用这个导出的方法。如下:

    https://img1.sycdn.imooc.com//climg/6221b75d0959d17a08000158.jpg

    https://img1.sycdn.imooc.com//climg/6221b7690936736505250144.jpg

    https://img1.sycdn.imooc.com//climg/6221b79309bf02a113710524.jpg

    同学自己试试,祝学习愉快!

    2022-03-04 14:54:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师