垂直菜單下拉jQuery-單擊新菜單時關閉打開的菜單

Question

我一直在制作移動垂直導航，到目前為止，它一直按預期工作，唯一的問題是用戶可以展開每個子菜單，並且頁面變得很長。 單擊新鏈接以展開時，我希望能夠關閉任何菜單。 我有以下代碼

        <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 &amp; 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>

我當前的腳本允許菜單項滑動

$(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中添加了一支非常快速的筆，因此您可以看到它的外觀。 我一直在看其他文章，但是我無法使其適應我的代碼。 如果有人可以幫助

Answer 1

將您的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');
            });
        });