0
私はモバイル垂直ナビを作っていて、これまでのように動作していますが、唯一の問題はすべてのサブメニューを展開でき、ページが非常に長くなることです。新しいリンクをクリックして展開すると、メニューを閉じることができます。私は私があなたはそれがどのように見えるかを見ることができますhttp://codepen.io/shanekweb/pen/dNamOZ に非常に迅速にペンを追加slideToggle垂直メニュードロップダウンjQuery - 新規クリック時のクローズメニュー
$(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');
});
});
にメニュー項目を可能にする次のコード
<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>
そして、私の現在のスクリプトを持っています。私は他の投稿を見てきましたが、自分のコードで動作するようには変更できません。誰もが
どうもありがとうシャム、素晴らしい作品。私が気づいたことの一つは、ulが閉じると、右の矢印がもう更新されないということです。あなたはそれらを行動に合わせる方法を知っていますか?あなたの助けを感謝 – shaneklive
こんにちは@shaneklive、私は答えを更新しました。 refをストロークさせるには、varsを使用してみてください。最小化コードを使用してください。 –
素晴らしいおかげで多くの仲間 – shaneklive