Question

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

棘手的部分是我有一个配置页面，允许用户在导航中显示/隐藏部分，它为 li 部分指定一个样式=＆＃34; display：none;＆＃34 ;什么时候关掉。

因此，下一个按钮无法转到下一页，必须首先确保它没有关闭。

菜单示例：

<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

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

Answer 2

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

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

根据我的理解，此HTML菜单示例将位于其网址位于嵌入式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;

唷！也许现在你会看到多个嵌入式元素没有类的问题？当然，如果你在元素上放置了几个类，那么这个代码就会简单得多，这样就可以直接选择你想要的元素，而不需要做任何猜测。

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

2 个答案: