0
我一直在做一個移動垂直導航,它的工作如預期到目前爲止,唯一的問題是,用戶可以展開每個子菜單,並且頁面變得很長。我希望能夠關閉任何菜單,當一個新的鏈接被點擊展開。我有以下代碼垂直菜單下拉菜單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 所以你可以看到它的樣子。我一直在尋找其他職位,但我無法適應它與我的代碼一起工作。如果有人可以幫助
非常感謝希亞姆,工程巨大。我注意到的一件事是,當ul關閉時,右側的箭頭不再更新。你有任何想法如何讓他們符合行爲?感謝您的幫助 – shaneklive
嗨@shaneklive,我已經更新了答案。請嘗試使用變量strore ref。並使用最小化代碼。 –
非常感謝很多哥們 – shaneklive