Question

我想让我的主菜单根据它们的总数动态调整li元素的填充，并使其响应页面宽度的变化。

我编写了这个jQuery脚本，它可以改变浏览器的窗口宽度（更小），但是当我调整大屏幕时它会停止工作。毕竟，我们赞赏任何其他关于更有效地实现或改进脚本性能的建议。

剧本：

    var menuItems = $(".main-navigation ul.menu > li > a");
    function sizeThePads() {
        var menuItemsCount = menuItems.length;
        var navWidth = $(".main-navigation").width();
        var totalWidth = 0;
        menuItems.each(function(){
            totalWidth = totalWidth + $(this).width();
        });
        var remainingWidth = (navWidth - totalWidth) -30;
        var aPadding = Math.floor((remainingWidth / menuItemsCount) / 2);
        menuItems.each(function(){
            menuItems.css({'padding-right':aPadding,'padding-left':aPadding});
        });
    }
    var headerWidth = $(".header").width();
    if (headerWidth > 724) {
        sizeThePads();
    }

    $(window).resize( function() {
        var newSize = $(".header").width();

        if (newSize != headerWidth) {
            if (newSize < 724) {
                menuItems.css({'padding-right':'','padding-left':''});
            }
            if (newSize > 724) {
                sizeThePads();
            }
        }
    });

我的HTML：

<nav class="navigation main-navigation" role="navigation">
    <ul class="nav menu">
        <li class="menu-item"><a href="#" style="">Home</a></li>
        <li class="menu-item"><a href="#" style="">About Us</a></li>
        <li class="menu-item"><a href="#" style="">Jobs</a></li>
        <li class="menu-item"><a href="#" style="">Services</a></li>
        <li class="menu-item"><a href="#" style="">Blog</a></li>
        <li class="menu-item"><a href="#" style="">Contact</a></li>
    </ul>
</nav>

Answer 1

这是我的最终剧本，有效......如果有人可以提出更好的优化方法，我们将不胜感激。

    var headerWidth = $(".header").width();
    var menuItems = $(".main-navigation ul.menu > li > a");

        function sizeThePads() {
            var headerWidth = $(".header").width();
            var menuItemsCount = menuItems.length;
            var navWidth = $(".main-navigation").width();
            var totalWidth = 0;
            menuItems.each(function(){
                totalWidth = totalWidth + $(this).width();
            });
            var remainingWidth = (navWidth - totalWidth) -30;
            var aPadding = Math.floor((remainingWidth / menuItemsCount) / 2);
            menuItems.each(function(){
                menuItems.css({'padding-right':aPadding,'padding-left':aPadding});
            });
        }

        if (headerWidth > 724) {
            sizeThePads();
        }

        $(window).resize( function() {
            var newSize = $(".header").width();

            //if (newSize != headerWidth) {
                if (newSize < 724) {
                    menuItems.css({'padding-right':'','padding-left':''});
                } else {
                    headerWidth = newSize;
                    sizeThePads();
                }
            //}
        });

jQuery - 调整菜单元素的填充以适合页面宽度

1 个答案: