我需要为这个 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;
});
最佳答案
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;
呸!也许现在您会看到没有类的多个嵌入元素的问题?当然,如果您在元素上放置几个类,那么这段代码会简单得多,这样您就可以直接选择您想要的元素,而无需所有这些猜测工作。
关于javascript - 嵌套列表,动态菜单 : creating a Next Page button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22713162/