垂直菜单下拉菜单jQuery - 关闭打开新菜单时点击
问题描述:
我一直在做一个移动垂直导航,它的工作如预期到目前为止,唯一的问题是,用户可以展开每个子菜单,并且页面变得很长。我希望能够关闭任何菜单,当一个新的链接被点击展开。我有以下代码垂直菜单下拉菜单jQuery - 关闭打开新菜单时点击
<nav id="AlphaNav">
<ul>
<li class="clickExpand">
<span>
NEWS
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</span>
<ul>
<li><a href="#">all</a></li>
<li><a href="#">agency news</a></li>
<li><a href="#">brand news</a></li>
<li><a href="#">media news</a></li>
<li><a href="#">marketing news</a></li>
<li><a href="#">sector news</a></li>
<li><a href="#">technology news</a></li>
<li><a href="#">podcasts</a></li>
</ul>
</li>
<li class="clickExpand">
<span>
TOP BRANDS & AGENCIES
<i class="fa fa-chevron-down" aria-hidden="true"> </i>
</span>
<ul>
<li><a href="#">agency news</a></li>
<li><a href="#">brand news</a></li>
<li><a href="#">media news</a></li>
<li><a href="#">marketing news</a></li>
<li><a href="#">sector news</a></li>
<li><a href="#">technology news</a></li>
<li><a href="#">podcasts</a></li>
</ul>
</li>
</ul>
</nav>
而且我现在的脚本,让菜单项的slideToggle
$(document).ready(function() {
$('#AlphaNav > ul > li > span').click(function() {
$(this).closest('li').find('ul').slideToggle();
$(this).find('i').toggleClass('fa-chevron-down fa-chevron-up');
});
});
我添加了一个非常快的笔http://codepen.io/shanekweb/pen/dNamOZ 所以你可以看到它的样子。我一直在寻找其他职位,但我无法适应它与我的代码一起工作。如果有人可以帮助
答
更新您的jQuery代码到:
$(document).ready(function() {
$('#AlphaNav > ul > li > span').click(function() {
$(this).closest('li').siblings().find('ul:visible').slideUp(); // ADDED
$(this).closest('li').siblings().find('ul:visible').parent().find('i').toggleClass('fa-chevron-down fa-chevron-up'); // ADDED 2
$(this).closest('li').find('ul').slideToggle();
$(this).find('i').toggleClass('fa-chevron-down fa-chevron-up');
});
});
非常感谢希亚姆,工程巨大。我注意到的一件事是,当ul关闭时,右侧的箭头不再更新。你有任何想法如何让他们符合行为?感谢您的帮助 – shaneklive
嗨@shaneklive,我已经更新了答案。请尝试使用变量strore ref。并使用最小化代码。 –
非常感谢很多哥们 – shaneklive