JQuery实现左侧菜单栏可折叠功能

最新推荐文章于 2023-01-06 14:09:35 发布

朵拉。

最新推荐文章于 2023-01-06 14:09:35 发布

阅读量1k

点赞数 1

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44314803/article/details/106218650

版权

JQuery实现左侧菜单栏可折叠功能

该效果包含根据右侧内容，左右联动

效果图

在这里插入图片描述

实现思想

主要利用滚动事件

  $('.oprationRight').scroll(
        function () {
            scrollTop = $('.oprationRight').scrollTop();
            activeIndex = calculateIndex(menuHeightArr, scrollTop);
            let _this = $('.oprationWrapper').children('.menuLevel1').eq(activeIndex);
            scrollToMenu(activeIndex, breadCrumbsType, scrollTop, calculateIndex, _this)

        }
    )

点击链接到某处使用a链接的锚点

	<a href="#one“></a>
	<div id="one"></div>

计算右边各块内容到顶部的距离,并存储

为防止滚动时面包屑遮挡住内容，需要减去第一块内容到顶部的距离

let arr = [];
$('.menuBlock').eq(activeIndex).children('.menuItemBlock').each(function () {
      arr.push($(this)[0].offsetTop - menuList.eq(0)[0].offsetTop)
 })

滚动时，判断当前滚动距离处于右边内容的哪一块，得到index值，为左边菜单做选中标记

	function calculateIndex(menuHeightArr, scrollTop) {
        let index = 0;
        for (let i = 0; i < menuHeightArr.length; i++) {
            if (i == 0) {
                if (scrollTop >= 0 && scrollTop < menuHeightArr[0]) {
                    index = 0;
                }
            } else if (0 < i && i < menuHeightArr.length - 1) {

                if (scrollTop >= menuHeightArr[i] && scrollTop < menuHeightArr[i + 1]) {
                    index = i;
                }
            } else if (i >= menuHeightArr.length - 1) {

                if (scrollTop >= menuHeightArr[i]) {
                    
                    index = menuHeightArr.length - 1;
                }
            }
        }
        return index;
    }