Question

我有一个简单的自适应菜单，有一项功能可以折叠菜单内容，而不是转移到Fiddle上的单词检查。

我面临的问题是，当我调整浏览器大小并且菜单开始隐藏按钮名More时也隐藏了调整浏览器的大小，我希望当菜单开始隐藏时它永远不会隐藏。

HTML

<div class="nav">
    <div class="navControl">
        <a href="#">Navigation</a>
    </div>
    <ul style=" height: 50px !important;">
        <li><a href="#" class="active">صفہ اول</a></li>
        <li><a href="#">تازہ ترین</a></li>
        <li><a href="#">پاکستان</a></li>
        <li><a href="#">دنیا</a></li>
        <li><a href="#">کھیل</a></li>
        <li><a href="#">فن و ثقافت</a></li>
        <li><a href="#">ماحولیات</a></li>
        <li><a href="#">کالم/بلاگ</a></li>
        <li><a href="#">فیچرز</a></li>
        <li><a href="#">ادب</a></li>
        <li><a href="#">اسلامی صفحہ</a></li> 
        <li><a href="#">تصاویر</a></li>
        <li><a href="#">ویڈیوز</a></li>       
        <li><a href="">ریڈیو</a></li>
    </ul>
</div>

CSS

.nav {
    background: #333;
    direction:rtl;
}

.nav .navControl {
    display: none;
    cursor: pointer;
}

.nav ul {
    list-style: none;
    margin-bottom: 0px !important;
    padding-right: 0px !important;
}

.nav li {
    display: block;
    position: relative;
    z-index: 2000;
}

.nav a {
    padding: 10px 10px;
    display: block;

    color: #fff;
    text-decoration: none;
    text-align: center;
}

.nav a:hover {
    color: #ccc;
}

.nav span {
    display: none;
}

.nav .dropdown {
    text-align: center;
}

.nav .dropdown li {
    margin: 0;
    display: inline-block;
}

.nav .dropdown a {
    padding: 0;
    border-right: 0;

    font-size: 0.8em;
}

.nav .dropdown li:last-child a {
    margin-right: 0;
}

.nav .dropdown ul {
    display: none;
}





/*----------------------------------------------------------------------------------------------------------------*\
    MEDIA QUERIES
\*----------------------------------------------------------------------------------------------------------------*/
@media all and (min-width: 600px) {
    .nav li {
        margin-right: -4px;
        display: inline-block;
    }

    .nav a {
       border-right: 1px solid #555;
    }

    .nav .dropdown {
        display: none;

        background: #333;

        position: absolute;
        top: 100%;
        left: 0;
    }

    .nav .dropdown li {
        display: block;
    }

    .nav .dropdown a {
        padding: 10px;
        margin-right: 0;

        white-space: nowrap;
        text-align: left;
    }

    .nav span {
        display: inline;

        position: relative;
        left: 5px;
    }

    .nav a:hover + .dropdown,
    .nav .dropdown:hover {
        display: block;
    }
}

JS

ResponsiveNav = function(nav, breakPoint) 
{   
    //if no nav container, output an error
    if(typeof nav === "undefined")
    {  
        console.log("The nav container needs setting.");
        return false;
    }

    //elements
    var navControl = nav.find(".navControl").first();
    var mainUL = nav.find("ul").first();
    var mainLIs = mainUL.children();
    var extraLI = $("<li class='extraDropdown'><a href='#'>More</a>");
    var extraDropdown = $("<ul class='dropdown'></ul>");    
    extraLI.append(extraDropdown);

    //variables
    var breakPoint = (typeof breakPoint != "number") ? 500 : breakPoint;
    var siteWidth = $(document).width();
    var lastSiteWidth = null;
    var navWidth = mainUL.width();
    var usingExtraDropdown = false;

    //listener for screen width
    $(window).resize(function() {
        siteWidth = $(document).width();
        navWidth = mainUL.width();
        checkNavType();
        lastSiteWidth = siteWidth;
    });

    //toggle nav when nav control is clicked
    navControl.on('click', function(event) {
        event.preventDefault();
        toggleNav();
    });

    //check if to use mobile nav or not
    checkNavType();

    //added a extra dropdown if not already there
    function addExtraDropdown()
    {
        if (!usingExtraDropdown) {
            usingExtraDropdown = true;
            mainUL.append(extraLI);
        }
    }

    //make sure the LIs fit into the nav
    function checkLIsFit()
    {
        var widthLIs = 0;

        mainLIs = mainUL.children();

        mainLIs.each(function() {
            widthLIs += $(this).outerWidth(true);
        });

        //need a dropdown
        if(widthLIs > navWidth) {
            addExtraDropdown();
            moveLI();
        }
    }

    //move LIs to the extra dropdown from main nav
    function moveLI()
    {
        mainLIs = mainUL.children().not(".extraDropdown");

        extraDropdown.prepend(mainLIs.last());

        checkLIsFit();
    }

    //move all LIs from extra dropdown back to the nav
    function resetExtraDropdown()
    {
        usingExtraDropdown = false;

        var LIsToMove = extraDropdown.children();

        mainUL.find(".extraDropdown").remove();

        mainUL.append(LIsToMove);
    }

    //check if to use mobile nav or not
    function checkNavType()
    {
        if(siteWidth != lastSiteWidth)
        {
            if(siteWidth >= breakPoint)
            {
                navControl.hide();
                mainUL.show();
            }
            else {
                navControl.show();
                mainUL.hide();
            }

            resetExtraDropdown();
            checkLIsFit();
        }
    }

    //open or close nav
    function toggleNav()
    {   
        mainUL.slideToggle();
    }
};

$(function() 
        {
            $(".nav").each(function()
            {
                new ResponsiveNav($(this), 600);
            });
        });

Answer 1

在计算li.extraDropdown时，你没有考虑widthLIs（更多）的宽度，它没有隐藏，因为它不适合，所以会转到下面一行。

所以要解决这个问题，只需要用40或其他你想要的值（当然可以正常工作）加注它：

function checkLIsFit()
{
    var widthLIs = 40; /*here*/

    mainLIs = mainUL.children();

    mainLIs.each(function() {
        widthLIs += $(this).outerWidth(true);
    });

    //need a dropdown
    if(widthLIs > navWidth) {
        addExtraDropdown();
        moveLI();
    }
}

Here a working jsfiddle example

Css优先级导航栏（菜单）问题

1 个答案: