Question

我有一个由嵌套列表组成的导航菜单。在较低的屏幕宽度（<800px）上，我想简单地显示所有列表项/超链接。

但是，对于较大的宽度，我只想在各个超链接悬停时显示子列表。我的方法（可能有一种我更渴望听到的更好的方法！）是：

检查屏幕宽度
如果＆gt; 800px，则隐藏嵌套列表
在悬停在

我正在努力完成最后一步，并希望得到一些指导。一个考虑因素是，如果禁用JS，那么列表应该按照较低的屏幕宽度显示。

$(document).ready(function () {
    SetupNavMenus();
});

/* 
If the screen width is greater than 800px, hide the child lists and wire-up the 
hyperlinks to show them on hover
*/
function SetupNavMenus() {
    if (screen.width > 800) {
        HideSubMenus();
        WireUpExpandableLinks();
    }
}

function HideSubMenus() {
    $("#menus ul ul").hide();
}

function WireUpExpandableLinks() {
    $("#menus ul a").each(function() {
        // show the respective list on link:hover
    });
}

function ShowSubMenu(lnk) {
    $(lnk).next('ul').slideToggle('fast');
}

A JsFiddle is here.

Answer 1

只需为大菜单添加一个css类，然后根据你的小提琴添加你的js：

//css
.big ul ul {display:none;}
.big ul li:hover ul {display:block;}


<div id="menus">
    <ul>
        <li>
            <a href="1.htm">Link 1</a>
        </li>
        <li>
            <a href="2.htm">Link 2</a>
            <ul>
                <li>
                    <a href="3.htm">Link 3</a>
                </li>
                 <li>
                    <a href="4.htm">Link 4</a>
                </li>
            </ul>
        </li>
            <li>
            <a href="5.htm">Link 5</a>
            <ul>
                <li>
                    <a href="6.htm">Link 6</a>
                </li>
                 <li>
                    <a href="7.htm">Link 7</a>
                </li>
            </ul>
        </li>
    </ul>
</div>


$(document).ready(function () {
    SetupNavMenus();
});


function SetupNavMenus() {
    if (screen.width > 800) {
        $('#menus').addClass('big');
    }
}

按照你的评论编辑，你可以像这样编写你的js：

function SetupNavMenus() {
    if (screen.width > 800) {
        HideSubMenus();
        WireUpExpandableLinks();
    }
}

function HideSubMenus() {
    $("#menus ul ul").hide();
}

function WireUpExpandableLinks() {
    //create event listener for mouseenter (as hover fires twice)
    $("#menus ul a").mouseenter( function() {
        ShowSubMenu(this);
    });
}

function ShowSubMenu(lnk) {
    //hide any open menues, show correct one. Will stay open until another is hovered
    $('#menus ul ul').hide();
    $(lnk).next('ul').show('fast');
}

用于在悬停时显示列表的连线链接

1 个答案: