我有一个无序列表,我正在使用左侧导航,每个列表项都是指向不同页面的链接,这是可折叠和可展开的。
我在 fidddle 中使用以下脚本,
HTML:
<ul class="navi-list">
<li class="no-subitem">
<a class="current">Overview</a>
<span class="navi-current"></span>
</li>
<li>
<a class="has-subitem">
<i class="fa fa-caret-right fw"> </i> Policies & Procedures
</a>
<ul class="submenu">
<li>
<a href="#"> Documents & Resources </a>
</li>
<li>
<a href="#"> Upcoming Events </a>
</li>
<li>
<a href="#"> News </a>
</li>
<li>
<a href="#"> Announcements </a>
</li>
</ul>
</li>
<li>
<a class="has-subitem">
<i class="fa fa-caret-right fw"> </i> Feeds & Discussions
</a>
<ul class="submenu">
<li>
<a href="#"> Blog & Podcasts </a>
</li>
<li>
<a href="#"> Photos & Videos </a>
</li>
</ul>
</li>
<li>
<a class="has-subitem">
<i class="fa fa-caret-right fw"> </i> About Us
</a>
<ul class="submenu">
<li>
<a href="#"> FAQs </a>
</li>
<li>
<a href="#"> Contact Us </a>
</li>
</ul>
</li>
</ul>
Javascript:
$(".has-subitem").next(".submenu").hide();
/*
if($(".submenu > li > a").find("current")){
var $here = $('this').parents().eq(1);
$('.submenu').show();
}
*/
$(document).on("click", ".has-subitem", function () {
$(this).next(".submenu").slideToggle();
$(this).find('i').toggleClass("fa-caret-right fa-caret-down");
});
现在,当我转到任何内部链接(这些链接是单独的着陆页,在元素上附加了一个附加类 current )时,我希望打开该特定列表并关闭其他列表。不确定如何实现它。
我尝试了 fiddle 中的注释代码。但它正在打开所有元素而不是当前事件的元素。
点击链接后,新的落地页导航菜单会有这个,
<ul class="navi-list">
<li class="no-subitem">
<a href="hr-page.html">Overview</a>
</li>
<li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Policies & Procedures </a>
<ul class="submenu">
<li ><a class="current" href="#"> Documents & Resources </a>
<span class="navi-current"></span>
</li>
<li><a href="#"> Upcoming Events </a></li>
<li><a href="#"> News </a></li>
<li><a href="#"> Announcements </a></li>
</ul>
</li>
<li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Feeds & Discussions </a>
<ul class="submenu">
<li><a href="#"> Blog & Podcasts </a></li>
<li><a href="#"> Photos & Videos </a></li>
</ul>
</li>
<li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> About Us </a>
<ul class="submenu">
<li><a href="#"> FAQs </a></li>
<li><a href="#"> Contact Us </a></li>
</ul>
</li>
</ul>
如您所见,我需要找到当前菜单并单独展开该子菜单,同时关闭其他子菜单。
谢谢
最佳答案
您需要从其他列表中找到选择 submenu
使用 .slideUp()
隐藏它们:
$(document).on("click",".has-subitem",function(){
$('.submenu').not($(this).next()).toggleClass("fa-caret-right fa-caret-down").slideUp();
$(this).next(".submenu").slideToggle();
$(this).find('i').toggleClass("fa-caret-right fa-caret-down");
});
关于javascript - 根据子事件查找父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27523222/