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>

我当前的脚本允许菜单项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添加了一支非常快速的笔所以你可以看到它的样子。我一直在寻找其他帖子，但我无法使其适应我的代码。如果有人可以提供帮助

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

垂直菜单下拉jQuery - 新单击时关闭打开菜单

1 个答案: