Question

当屏幕调整大小时，我将子导航链接放入“更多”链接中。 #MoreList

这样可以正常工作但是当窗口重新展开时，链接会停留在#MoreList内部，并且当有足够的可用空间时，我试图让它们转到原来的位置

我尝试了一些事情，但是很挣扎，只是想知道是否有人知道我能做到这一点的方法吗？

  function SubNav() {

    'use strict';

    var $elements = {
            body: $('body'),
            header: $('header'),
            subMenu: $('#SubNav'),
            subList: $('.sub-nav__list'),
            subItem: $('.sub-nav__list-item'),
            subTitle: $('.sub-nav__section-title'),
            moreList: $('#MoreList'),
            moreItem: $('#MoreItem'),

            exclude: $('.js-nav-exclude'),

            hashLink: $('a[href*=#]:not([href=#])')
        },

        $variables = {
          totalWidth: 0,
          navWidth: 0,
          freeSpace: 0,
          moreItem: null,
          reqSpace: null,
          currentOffset: 0,
          scrollby: 0,
          bodyWidth: 0
        },

        overflow = true,
        moveItem = null,
        freeSpace = 0,
        firstItem = 0,
        target = null;

    // Move links into more list
    function removeLink(){
        moveItem = $elements.moreItem.prev('li');
        $elements.moreItem.addClass('is-visible');
        $elements.moreList.prepend(moveItem);
    }

    // Check current free space in sub nav
    function checkSpace() {
        if ($elements.subTitle.length) {
            freeSpace = $elements.subTitle.outerWidth(true);
        }
        freeSpace = $elements.subMenu.width() - (freeSpace + $elements.subList.outerWidth(true));

        firstItem = $elements.moreList.first('li').outerWidth(true);

        if (freeSpace > firstItem) {
            moveItem = $elements.moreList.first('li');
        }
    }

    // Get current overflow
    function getOverflow() {
        if ($elements.subMenu.get(0).scrollHeight > $elements.subMenu.get(0).offsetHeight || $elements.subMenu.get(0).scrollWidth > $elements.subMenu.get(0).offsetWidth) {
            removeLink();
        } else {
            overflow = false;
            checkSpace();
        }
        return overflow;
    }

    // Check for overflow and move links
    function checkWidth() {
        overflow = true;
        while (overflow === true) {
            getOverflow();
        }
    }

    // Smooth scrolling functionality
    function smoothScroll() {
        $elements.hashLink.click(function () {

            if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {

                // Get target
                target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

                if (target.length) {

                    // Disable pointer events to stop mega menu from displaying
                    $elements.header.css('pointer-events', 'none');

                    // Scroll to target
                    $elements.body.animate({
                        scrollTop: target.offset().top - 96
                    }, 1000);

                    // Reset hidden header
                    setTimeout(function () {
                        $elements.body.addClass('hide-offscreen');
                    }, 1000);

                    // Re-enable pointer events
                    setTimeout(function () {
                        $elements.header.css('pointer-events', 'all');
                    }, 1200);
                    return false;
                }
            }
        });
    }

    this.init = function () {
        smoothScroll();
        if ($elements.subMenu.length) {
            $(window).load(function () {
                checkWidth();
            });
            $(window).resize(function () {
                checkWidth();
            });
        }
    };

}

var subNav = new SubNav();
subNav.init();

Answer 1

看起来你正在检查

if (freeSpace > firstItem) {
            moveItem = $elements.moreList.first('li');
        }

所以为什么不检查是否

if (freeSpace < firstItem) {
        moveItem = yourDesiredElement
    }

jQuery - 调整窗口大小时重新定位链接

1 个答案: