移动下拉菜单

Question

我的菜单适用于所有浏览器和Chrome中的移动预览。但是，如果我在任何移动设备上加载该网站，菜单会展开以显示子菜单。但是，当我点击子菜单时，它不会点击链接，而是将菜单折叠回菜单。

CSS

/*  Nav  */
.nav { padding-top: 50px; margin-bottom: -2px; }
.nav ul { list-style-type: none; }
.nav ul li { font-size: 15px; line-height: 1.6; text-transform: uppercase;       font-family: 'Myriad'; float: left; position: relative; }
.nav ul li a { color: #687074; display: block; padding: 5px 25px; border-bottom: 2px solid #e5e5e5; transition: color .2s, border-color .2s; }
.nav ul li a .fa { margin-left: 5px; }
.nav ul li.current a,
.nav ul li a:hover { color: #d35400; border-bottom: 2px solid #d35400; }
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus { background-color: #fff; border-bottom: 2px solid #d35400; }

.nav ul li .dropdown-menu { box-shadow: 0 3px 3px rgba(0, 0, 0, .15); border: 0; border-radius: 0; margin-top: 0; padding: 0; }
.nav ul li .dropdown-menu li { float: none; display: block; width: 100%; }

.nav .nav-dropdown { min-width: 150px; display: none; position: absolute; top: 100%; left: 0; background-color: #fff; border-bottom: 2px solid #585f69; }
.nav .nav-dropdown li { font-size: 14px; text-align: center; float: none; }

.nav > ul > li.hover .nav-dropdown,
.nav > ul > li:hover .nav-dropdown { display: block; }

/*  Nav Access  */
.nav-access { display: block; position: absolute; top: 10px; right: 0; }
.nav-access ul { list-style-type: none; }
.nav-access ul li { font-size: 12px; line-height: 1.17; text-transform:   uppercase; float: left; border-left: 1px solid #9b9b9b; padding-left: 5px; margin-left: 5px; }
.nav-access ul li:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
.nav-access ul li a { color: #9b9b9b; transition: color .2s; }
.nav-access ul li a:hover { color: #d35400; }

/*  Responsive  */

@media (max-width: 1199px) {

.nav ul li a { padding: 5px 10px; }

}

@media (max-width: 992px) {

.nav ul li { font-size: 14px; }
.nav ul li a { padding: 5px 8px; }

.nav .nav-dropdown li { font-size: 13px; }

}
@media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
    display: block;
}
}
    @media (max-width: 767px) {

.nav-access { position: static; }
.nav-access ul li { text-align: center; font-size: 13px; font-family:  'Myriad'; display: block; float: none; padding-left: 0; margin-left: 0; border-left: 0; }
.nav-access ul li a { display: block; padding: 5px; border-bottom: 2px solid #e5e5e5;}

.nav { margin: auto; padding: 0; }
.nav ul li { text-align: center; display: block; float: none; }
.nav ul li a { padding-top: 5px;}

.nav .nav-dropdown { position: static; }

.nav-btn { width: 30px; height: 30px; display: block; position: absolute; top: 50%; right: 0; margin-top: -15px; background-color: #535a65; border-radius: 3px; transition: .2s; }
.nav-btn span { width: 20px; height: 3px; display: block; position: absolute; top: 14px; left: 5px; background-color: #898989; transition: .2s; }
.nav-btn:before,
.nav-btn:after { content: ''; width: 20px; height: 3px; display: block; position: absolute; left: 5px; background-color: #898989; transition: .2s; }
.nav-btn:before { top: 8px; }
.nav-btn:after { top: 20px; }
.nav-btn.active { background-color: #6d727b; }
.nav-btn.active span { background-color: #d35400; }
.nav-btn.active:before,
.nav-btn.active:after { background-color: #d35400; }

.dropdown-menu { float: none; position: static; width: 100%; }
.dropdown-menu li a { font-size: 13px; background-color: #fff; }
.dropdown-menu li > a,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus { background-color: #f5f5f5; }

}

Function.js

$doc.ready(function() {
    // Mobile navigation
    $('.nav-btn').on('click', function(e) {
        $(this).toggleClass('active');

        $('.header-content').toggleClass('expanded');

        e.preventDefault();
    });