嵌套列表，动态菜单：创建下一页按钮

Question

我需要为这个 html5 应用导航创建一个下一节按钮。它有一些嵌套列表和几个页面，每个页面都有几张内容幻灯片。当您到达页面的最后一张幻灯片时，我希望下一节按钮可见，单击时会转到菜单中的下一个可用页面。

棘手的部分是我有一个配置页面，允许用户在导航中显示/隐藏部分，它为 li 部分分配了 style="display:none;"关闭时。

所以下一个按钮不能简单地转到下一页，它必须首先确保它没有关闭。

菜单示例：

<ul class="accordion">
    <li id="aboutUs"><a href="#">Introduction</a>
        <ul class="sub-menu">
            <li><a href="about-intro.html"><em>00</em>Intro</a></li>
            <li><a href="about-5star.html"><em>01</em>What makes a 5-Star Specialist?</a></li>
            <li><a href="about-install.html"><em>02</em>Installed services</a></li>
            <li><a href="about-products.html"><em>03</em>Our Products</a></li>
            <li><a href="about-warranty.html"><em>04</em>Our Warranty</a></li>
            <li><a href="about-why-velux.html"><em>05</em>Why VELUX?</a></li>
        </ul>       
    </li>
    <li id="whyAdd" class="prodSkylights"><a href="#">Why skylights?</a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em>Why add a skylight?</a>
                <ul class="sub2-menu">
                    <li><a href="whyadd-daylight.html"><em>01</em>Daylight control & natural light</a></li>
                    <li><a href="whyadd-fresh-air.html"><em>02</em>Fresh air</a></li>
                    <li><a href="whyadd-rooms.html"><em>03</em>Rooms</a></li>
                    <li><a href="whyadd-desirable.html"><em>04</em>Skylights are desirable</a></li>
                    <li class="prodSunTunnel"><a href="whyadd-suntunnels.html"><em>05</em>SUN TUNNELS for small spaces</a></li>
                </ul>
            </li>
            <li><a href="#"><em>02</em>Why replace a skylight?</a>
                <ul class="sub2-menu">
                    <li class="prodSkylights"><a href="whyreplace-skylights.html"><em>01</em>Why replace when reroofing?</a></li>
                    <li><a href="whyreplace-upgrade.html"><em>02</em>Upgrade from plastic to glass</a></li>
                    <li><a href="whyreplace-installation.html"><em>03</em>Easy installation</a></li>
                </ul>
            </li>  
        </ul>
    </li>
    <li id="vss" class="prodSkylights"><a href="#">Solar Powered "Fresh Air" Skylight</a>
        <ul class="sub-menu">
            <li><a href="vss-why.html"><em>01</em>Why fresh air skylights?</a></li>
            <li><a href="vss-skylight.html"><em>02</em>Solar Powered "Fresh Air" Skylight</a></li>
        </ul>
    </li>
</ul>

如何实现这个按钮？

我想要类似的东西：

$("#next-section").click(function(){
    event.preventDefault();         // cancel click through
    // get current list item
    var currli = $('li:visible a');
    // get next list item
    var nextli = currli.next();
    // if nextli length is 0, make it equal to first li
    if (nextli.length == 0) {
        nextli = currli.siblings(':first');
    }
    var nextpage = nextli.attr('href');

    window.location = nextpage;

});

Answer 1

var currli = $('li:visible');

这不会选择您所在页面的“当前”列表项；这将选择当前可见的所有列表项。您还必须记住，这将选择所有列表项，其中还将包括您最外层的“列表部分”。

据我了解，这个 HTML 菜单示例将出现在其 URL 位于最嵌入的 li 元素中的所有页面上。如果是这种情况，我会为当前页面的“活动”列表项分配一些类。因此，我会将class="active" 之类的内容分配给我所在页面的列表项。

然后，您可以通过执行以下操作来选择“当前”列表项：

var currLi = $('li.active');

这是棘手的部分：由于您的 HTML 不一致（您可能有多个子菜单来访问实际的列表项），如果需要，您需要找到一种“跳转”到下一部分的方法是。您可以使用 :last-child 选择器来判断是否需要转到下一部分，如下所示：

var nextPage = null;
if (currLi.is(':last-child')) {
    // we need to jump the gap
    var nextSubmenu = null;
    var parentUl = currLi.parent('ul');
    // check to see if we're in a 2 layer submenu and we need to get to the next
    var isSubmenu = parentUl.hasClass('sub2-menu');
    if (isSubmenu && parentUl.parent('li').is(':first-child')) {
        nextSubmenu = parentUl.parent('li').nextAll('li:visible')
            .eq(0).children('ul.sub2-menu');
    }
    else {
        if (isSubmenu) {
            parentUl = parentUl.closest('ul.sub-menu');    
        }
        nextSubmenu = parentUl.parent('li')
            .nextAll('li:visible').eq(0).children('ul.sub-menu');
        // check to see if there are sub layers here
        var sub2Menu = nextSubmenu.find('ul.sub2-menu');
        if (sub2Menu.length > 0) {
            nextSubmenu = sub2Menu.eq(0);
        }
    }
    nextPage = nextSubmenu.find('li:first-child > a').attr('href');
}
else {
    nextPage = currLi.next('li').children('a').attr('href');
}
// finally, navigate!
window.location = nextPage;

呸！也许现在您会看到多个没有类的嵌入元素的问题？当然，如果您在元素上放置一些类，这样代码会简单得多，这样您就可以直接选择所需的元素，而无需进行所有这些猜测工作。

Answer 2

使用:visible 选择器仅选择可见的元素。
https://api.jquery.com/visible-selector/