Question

我使用jquery创建了一个带有菜单图标的非常简单的自适应导航。一切似乎都运作正常;但是，当我在移动菜单中点击锚链接时，我正在努力使菜单自动折叠。

这是html：

<header>
    <a href="#home" id="logo"><h1>Logo</h1></a>
    <a href="javascript:void(0)" id="menu-icon"><i class="icon-menu"></i></a>
    <nav id="main-navigation">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#section-1">Section 1</a></li>
            <li><a href="#section-2">Section 2</a></li>
            <li><a href="#section-3">Section 3</a></li>
            <li><a href="#section-4">Section 4</a></li>
        </ul>
    </nav>
</header>

CSS：

        #menu-icon {
                     display: none;
                     float: right;
                     padding: 33px 20px;
                     margin-bottom: -6px;
                 }

                 #menu-icon i {
                     color: white;
                 }

                #main-navigation {
                    float: right;
                    padding: 20px;
                }

                #main-navigation ul {
                    list-style: none;
                }

                #main-navigation li {
                    display: inline-block;
                    float: left;
                    padding: 10px 20px;
                    margin-top: -15px;
                }

                #main-navigation ul li a {
                    color: #fff;
                    text-decoration: none;
                }

                #main-navigation ul li a:hover {
                    border-bottom: 3px solid #3498db;
                    padding-bottom: 3px;
                }

    @media only screen and (max-width : 768px) {

            #menu-icon {
                display: inline-block;
            }

            #main-navigation{
                background-color: #4d525b;
                width: 100%;
                text-align: center;
                display: none;
            }

            #main-navigation ul li {
                display: block;
                float: none;
                padding: 30px;
            }

            #main-navigation ul li a {
                font-size: 18px;
            }
        }
@media screen and (min-width:1199px) {
       #main-navigation { display:block !important; }
}

jQuery：

$("#menu-icon").click(function(){
    $("#main-navigation").slideToggle("slow");
    $("#menu-icon i").toggleClass("icon-close");
});

这是一个包含所有内容的CodePen：https://codepen.io/lukecjohnson/pen/gePrvw

任何帮助或建议将不胜感激。谢谢大家！

Answer 1

这似乎可以按你的意愿运作：

$("#menu-icon, #main-navigation a").click(function(){
    $("#main-navigation").slideToggle("slow");
    $("#menu-icon i").toggleClass("icon-close");
});

编辑：请试一试。如果需要，修改媒体查询。

$("#menu-icon, #main-navigation a").click(function(){
  if(window.matchMedia('(max-width: 768px)').matches) {
    $("#main-navigation").slideToggle("slow");
    $("#menu-icon i").toggleClass("icon-close");
  }
});

jQuery响应菜单 - 单击锚链接后自动折叠菜单？

1 个答案: