时间戳

首页 > 解决方案 > 响应式站点导航切换无响应

jquery - 响应式站点导航切换无响应

问题描述

我正在为一家教育机构创建一个响应式网页。我使用了一个免费的模板，可归功于设计师。

在移动视图中，当我在 chrome 中向上滚动（地址栏隐藏在快照下方）时，蓝色导航切换（菜单栏）没有响应。

没有反应 向下滚动后（现在地址栏在下面的快照中可见）导航切换工作正常。

工作正常

我的js代码

$.fn.dropdownMenu = function(opt) {
return $(this).each(function() {
    var el = $(this),
        optsDefault = {
            menuClass: 'dropdown-menu-list',
            breakpoint: 1000,
            toggleClass: 'active',
            classButtonToggle: 'toggle-menu',
            subMenu: {
                class: 'sub-menu',
                parentClass: 'menu-item-has-children',
                toggleClass: 'active'
            }
        },
        options = $.extend({}, optsDefault, opt);
    el.on('dropdownMenu', function() {
        $('.' + options.classButtonToggle, el).on('click', function(e) {
            e.stopPropagation();
            $('.' + options.menuClass, el).toggleClass(options.toggleClass);
        });
        $('.' + options.subMenu.parentClass, el).on('click', '> a', function(e) {
            e.preventDefault();
            var self = $(this);
            self.next('.' + options.subMenu.class).slideToggle(400);
            self.parent().toggleClass(options.subMenu.toggleClass);
        });
        $(document).on('click', function() {
            $('.' + options.menuClass, el).removeClass(options.toggleClass);
            $('.' + options.subMenu.parentClass, el).removeClass(options.subMenu.toggleClass);
            $('.' + options.subMenu.class, el).hide();
        });
        $('.' + options.menuClass).on('click', function(e) {
            e.stopPropagation();
        });
    });
    if (window.innerWidth <= options.breakpoint) {
        el.trigger('dropdownMenu');
    }
    $(window).resize(function() {
        if (window.innerWidth <= options.breakpoint) {
            el.trigger('dropdownMenu');
        } else {
            $('.' + options.classButtonToggle, el).off('click');
            $('.' + options.subMenu.parentClass, el).off('click', '> a');
            $('html, body').off('click');
            $('.' + options.menuClass).off('click');
        }
    });
});

}

我的 HTML 代码

<div class="page-wrap">

        <!-- header -->
        <header class="header header--fixed">
            <div class="container">
                <div class="header__inner">
                    <div class="header__logo">Wisdom Learning<a href="index.html"><!--<img src="assets/img/logo.png" alt=""/>--></a></div>
                    <div class="header__menu">

                        <!-- onepage-nav -->
                        <nav class="onepage-nav">

                            <!-- onepage-menu -->
                            <ul class="onepage-menu">
                                <li class="current-menu-item"><a href="#id-1">Home</a>
                                </li>
                                <li><a href="#id-2">About</a>
                                </li>
                                <li><a href="#id-3">Products</a>


                                </li>
                                <li><a href="#id-4">Press</a>
                                </li>
                                <li><a href="#id-5">Contact</a>
                                </li>
                            </ul><!-- onepage-menu -->

                            <div class="navbar-toggle"><span></span><span></span><span></span></div>
                        </nav><!-- End / onepage-nav -->

                    </div>
                </div>
            </div>
        </header><!-- End / header -->

        <!-- Content-->
        <div class="md-content">

            <!-- hero -->
            <div class="hero" id="id-1" style="background-image: url('assets/img/bg/1.jpg');">
                <div class="hero__wrapper">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8 ">
                                <h1 class="hero__title">We make learning<br/>


                                    <!-- typing__module -->
                                    <div class="typing__module" data-options='{"typeSpeed":60}'>
                                        <div class="typed-strings"><span>Interactive</span><span>Easy</span><span>Fun</span>
                                        </div><span class="typed"></span>
                                    </div><!-- End / typing__module -->

                                </h1>

                            </div>
                        </div><span id="back-to-down">Know more</span>
                    </div>
                </div>
            </div><!-- End / hero -->


            <!-- Section -->
            <section class="md-section bg-gray" id="id-2">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5 ">

                            <!-- slide-image -->
                            <div class="slide-image">

                                <!-- swiper__module swiper-container -->
                                <div class="swiper__module swiper-container slide-image__front" data-options='{"slidesPerView":1,"spaceBetween":0}'>
                                    <div class="swiper-wrapper">
                                        <div class="slide-item" style="background-image: url('assets/img/about/1.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/2.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/3.jpg');"></div>
                                    </div>
                                    <div class="swiper-pagination-custom"></div>
                                </div><!-- End / swiper__module swiper-container -->


                                <!-- swiper-thumbnails__module swiper-container -->
                                <div class="swiper-thumbnails__module swiper-container slide-image__black" data-options='{"slidesPerView":1,"spaceBetween":0,"delay":10000}'>
                                    <div class="swiper-wrapper">
                                        <div class="slide-item" style="background-image: url('assets/img/about/1b.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/2b.jpg');"></div>
                                        <div class="slide-item" style="background-image: url('assets/img/about/3b.jpg');"></div>
                                    </div>
                                </div><!-- End / swiper-thumbnails__module swiper-container -->

                            </div><!-- End / slide-image -->

                        </div>

和 CSS 代码

.onepage-nav {
z-index: 999;}    

.onepage-nav ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
}

.onepage-nav li {
position: relative;
z-index: 9;
}

.onepage-nav li a {
display: block;
position: relative;
text-decoration: none;
}

@media (min-width: 1201px) {
.onepage-nav {
    text-align: center;
}

.onepage-nav li:hover > a {
    color: #19c2c9;
}

.onepage-nav .onepage-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
}

.onepage-nav .onepage-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.onepage-nav .onepage-menu a {
    padding: 20px 30px;
}

.onepage-nav .onepage-menu .sub-menu {
    text-align: left;
    padding: 0 2px;
}

.onepage-nav .onepage-menu .sub-menu li {
    background-color: #111;
}

.onepage-nav .onepage-menu .sub-menu li:first-child {
    padding-top: 18px;
}

.onepage-nav .onepage-menu .sub-menu li:last-child {
    padding-bottom: 18px;
}

.onepage-nav .onepage-menu .sub-menu a {
    color: #eee;
    padding: 2px 25px;
}

.onepage-nav .onepage-menu .sub-menu a:after {
    right: 15px;
}

.onepage-nav .onepage-menu > li {
    display: inline-block;
}

.onepage-nav .onepage-menu a {
    font-size: 16px;
    color: #748182;
    transition: all 300ms ease;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    padding: 10px 20px;
}

.onepage-nav .onepage-menu .sub-menu {
    display: block !important;
}

.onepage-nav .onepage-menu .sub-menu .current-menu-parent > a,
.onepage-nav .onepage-menu .sub-menu .current-menu-item > a {
    color: #19c2c9;
}

.onepage-nav .onepage-menu .current-menu-parent > a,
.onepage-nav .onepage-menu .current-menu-item > a {
    color: #19c2c9;
}

.onepage-nav .onepage-menu .sub-menu {
    width: 200px;
    position: absolute;
    top: 100%;
    z-index: -1;
    left: 0;
    transition: all 300ms ease;
}

.onepage-nav .onepage-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.onepage-nav .onepage-menu .sub-menu li > a {
    font-size: 14px;
    transition: all 300ms ease;
}

.onepage-nav .onepage-menu .sub-menu li:hover > a {
    color: #4aa8ff;
}

.onepage-nav .onepage-toggle-menu {
    display: none;
}
}

@media (max-width: 1200px) {
.onepage-nav .onepage-menu {
    position: fixed;
    top: 0;
    will-change: transform;
}

.onepage-nav .onepage-menu a {
    font-size: 14px;
}

.onepage-nav .onepage-menu a:after {
    right: 0;
    width: 50px;
    text-align: center;
}

.onepage-nav .onepage-menu .sub-menu {
    display: none;
}

.onepage-nav .onepage-menu {
    background-color: #111;
}

.onepage-nav .onepage-menu a {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #eee;
}

.onepage-nav .onepage-menu a:after {
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.onepage-nav .onepage-menu {
    left: 0;
    width: 280px;
    background-color: #111;
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
}

.onepage-nav .active.onepage-menu {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}

.onepage-nav .onepage-menu {
    z-index: 99999;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    width: 300px;
    transition: all 300ms ease;
}

.onepage-nav .onepage-menu li {
    position: relative;
}

.onepage-nav .onepage-menu a {
    padding: 12px 15px;
    font-size: 16px;
    text-transform: capitalize;
    color: #748182;
}

.onepage-nav .onepage-menu a:hover {
    color: #fff;
}

.onepage-nav .onepage-menu .active > a {
    color: #fff;
}

.onepage-nav .onepage-menu .current-menu-parent > a,
.onepage-nav .onepage-menu .current-menu-item > a {
    color: #fff;
}

.onepage-nav .onepage-menu .sub-menu a {
    padding: 12px 15px;
}

.onepage-nav .onepage-menu .sub-menu .menu-item-has-children > a:hover {
    color: #4aa8ff;
}

.onepage-nav .onepage-menu .sub-menu .menu-item-has-children.active > a {
    color: #4aa8ff;
}

.onepage-nav .onepage-toggle-menu {
    display: block;
}
}

.onepage-nav {
display: inline-block;
vertical-align: middle;
}

.onepage-nav li.current a {
color: #19c2c9;
}

.onepage-menu.active ~ .navbar-toggle span:nth-child(1) {
top: 10px;
-webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

.onepage-menu.active ~ .navbar-toggle span:nth-child(2) {
opacity: 0;
left: -40px;
}

.onepage-menu.active ~ .navbar-toggle span:nth-child(3) {
top: 10px;
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}

我认为它的点击事件和我的导航栏位置之间的链接有一些问题请帮助解决导航切换应该一直工作的解决方案，无论其位置如何。

链接到我的网页：这里

标签： jqueryhtmlcssresponsive-designbootstrap-4

解决方案

推荐阅读