jquery - 选择/单击后导航列表不会折叠(移动/选项卡 View )

Question

当单击导航栏并选择选项时，它会移动到同一页面中的特定部分，但导航列表(下拉列表)不会折叠或关闭。 可能是调用 none block 的函数没有被执行， 如果有人会指导功能调用并为此进行事件调用，我们将不胜感激。 (移动/标签 View 需要)

以下代码是html、css和js。

因为，我是新手，所以特定部分阻止了它或 wat dnt knw，!

以下代码 html:

<nav class="nav">
                <ul class="nav-list" data-toggle="dropdown">
                    <li class="nav-item"><a href="#home">Home</a></li>
                    <li class="nav-item"><a href="#aboutWrapper">About</a></li>
                    <li class="nav-item"><a href="#services">Products</a></li>
                    <li class="nav-item"><a href="#contact">Contact</a></li>
                </ul>
        </nav>

CSS:

@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav-mobile {
    display:block;
}
.nav {
    width:100%;
    padding:0px 0 0;
}
.nav-list {
    display:none;
}
.nav-item {
    width:100%;
    float:none;
}
.nav-item a {
    background:#34495E;
    padding:10px;
}
.nav-item:first-child a {
    border-radius:5px 0 0;
}
.nav-item:last-child a {
    border-radius:0 0 5px 5px;
}
.nav-active {
    display:block;
}
.nav-mobile-open {
    border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
}
}

js代码:

<script>
    (function () {

        // Create mobile element
        var mobile = document.createElement('div');
        mobile.className = 'nav-mobile';
        document.querySelector('.nav').appendChild(mobile);

        // hasClass
        function hasClass(elem, className) {
            return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
        }

        // toggleClass
        function toggleClass(elem, className) {
            var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
            if (hasClass(elem, className)) {
            alert("if func");
                while (newClass.indexOf(' ' + className + ' ') >= 0) {
                    newClass = newClass.replace(' ' + className + ' ', ' ');
                }
                elem.className = newClass.replace(/^\s+|\s+$/g, '');
            } else {
                elem.className += ' ' + className;
            }

        }

        // Mobile nav function
        var mobileNav = document.querySelector('.nav-mobile');
        var toggle = document.querySelector('.nav-list');
        mobileNav.onclick = function () {
            alert("func ");
            toggleClass(this, 'nav-mobile-open');
            toggleClass(toggle, 'nav-active');              
        };
    })();
</script>

Answer 1

请添加这个belwo mobileNav.onclick

toggle.onclick = function () {
        toggleClass(toggle, 'nav-active');              
    };

这将允许不同的调用。