时间戳

首页 > 解决方案 > 响应式导航栏问题（包括 jQuery）

html - 响应式导航栏问题（包括 jQuery）

问题描述

我创建了一个响应式导航栏。但是，在 iPad 断点期间，当您尝试:active通过单击汉堡图标关闭导航栏时，连接的 jQuery 脚本也会.removeClass(".active").slideToggle()在两个按钮上实现 - 这应该像以前一样保留在那里。

澄清一下：在 iPad 断点上有两个按钮和一个汉堡图标。当您单击汉堡图标以打开导航元素时，一切正常。但是，当您随后关闭.nav-item:active元素时， . nav-itembtn 元素也消失了，然后整个事情就搞砸了。

这是代码笔：

https://codepen.io/kingersnotepad/pen/YzVYVpp

此外，这里是 HTML 和 jQuery：

<head>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(function() {
        $(".toggle").on("click", function() {
            if ($(".nav-item").hasClass("active")) {
                $(".nav-item").slideUp().removeClass("active");
        } else if ($(".ham1").hasClass("active") && $(".nav-item btn").hasClass("active") && $(".nav-item").slideUp().removeClass("active")) {
                $(".nav-item").slideUp().removeClass("active").not(".btn");
        } else {
                $(".nav-item").slideDown().addClass("active");
          }
        });
    });
   </script>
  
<head>
<body>
<nav>
    <ul class="nav-ul">
        <li class="logo"><img src="Assets/images/logo.PNG"></li>
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Portfolio</a></li>
        <li class="nav-item"><a href="#">Blog</a></li>
        <li class="nav-item btn"><a href="#">Client Login</a></li>
        <li class="nav-item btn secondary"><a href="#">Book A Free Call</a></li>
        <li class="toggle">
                <svg class="ham ham1" viewBox="0 0 100 100" width="50" onclick="this.classList.toggle('active')">
                    <path class="ham-line top" d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272"/>
                    <path class="ham-line middle" d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272"/>
                    <path class="ham-line bottom" d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272"/>
                </svg>
        </li>
    </ul>
</nav>

&这里是CSS：

/*Basic Styles*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  nav {
    padding: 5px 20px;
    margin: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

 .logo img {
   height: 35px;
  }

  nav ul {
    list-style-type: none;
    width: 100%;
    border: none;
  }

  nav a {
    color: black;
    text-decoration: none;
  }

  nav a:hover {
    text-decoration: underline;
  }

  .nav-ul li:not(.toggle) {
    padding: 15px 5px;
    white-space: nowrap;
  }


    /* Navbar Hamburger */
  .toggle {
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .ham-line {
    fill:none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke:#000;
    stroke-width: 3;
    stroke-linecap:round;
  }

  .ham1 .top {
    stroke-dasharray: 40 172;
  }
  .ham1 .middle {
    stroke-dasharray: 40 111;
  }
  .ham1 .bottom {
    stroke-dasharray: 40 172;
  }
  .ham1.active .top {
    stroke-dashoffset: -132px;
  }
  .ham1.active .middle {
    stroke-dashoffset: -71px;
  }
  .ham1.active .bottom {
    stroke-dashoffset: -132px;
  }


  
  /* Mobile Nav */
  .nav-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .toggle {
    order: 1;
  }

  .nav-item.button {
    order: 2;
  }
  .nav-item {
    width: 100%;
    text-align: center;
    order: 3;
    display: none;
  }
  .nav-item.active {
    display: block;
    overflow: hidden;
  }
  
  
  /* Tablet Nav */
  @media all and (min-width: 767px) {
    .nav-ul {
        justify-content: center;
    }
  
    .logo {
        flex: 1;
    }
  
    .nav-item.btn {
        width: auto;
        order: 1;
        display: block;
    }
    .toggle {
        order: 2;
    }
    .btn.secondary {
        border: 0;
    }
    .btn a {
        padding: 7.5px 15px;
        background: teal;
        border: 1px #006d6d solid;
        border-radius:50em;
    }
    .btn.secondary a {
        background: transparent;    
    }
    .btn a:hover {
        text-decoration: none;
        transition:all .25s;
    }
    .btn:not(.secondary) a:hover {
        background: #006d6d;
        border-color: #005959;
    }
    .btn.secondary a:hover {
        color: #ddd;
    } 
  }

  
  /* Desktop Nav */
  @media all and (min-width: 1024px) {
    .nav-item {
        display: block;
        width: auto;
    }
    .toggle {
        display: none;
    }
    .logo {
        order: 0;
    }
    .nav-item {
        order: 1;
    }
    .btn {
        order: 2;
        margin-left: 2px;
    }
    .nav-item:not(.btn) {
      margin-right: 20px;
    }
    .nav-ul li {
        padding: 15px 10px;
    }
    .nav-ul li.btn:not(.secondary) {
        padding-right: 0;
    }
  }

如果有人可以推荐一个修复程序，那就太好了。

干杯

标签： htmljquerycssresponsive-nav

解决方案

问题是您将.active课程分配给所有您 的课程，.nav-items其中包括您要继续显示的两个按钮。

编辑：我已更改代码以修复动画问题，如果您正在寻找其他内容，请告诉我！（由于 CSS 的加载方式，这似乎不适用于 codepen 之外的任何东西）。

HTML

添加

    $(function () {
        $('.toggle').on('click', function () {
            if ($('.nav-item').hasClass('active')) {
                $('.nav-item:not(.btn)').slideToggle().removeClass('active');
            } else {
                $('.nav-item:not(.btn)').slideToggle().addClass('active');
            }
        });
    });

CSS（在平板断点下）

@media all and (min-width: 1024px) {
.nav-item {
    display: block !important;
    width: auto;
}

尽管没有进行其他更改https://codepen.io/Simar-Ubhi/pen/eYWyWWa?editors=1100 ，但请查看 codepen 以获取完整代码。

推荐阅读