响应式导航栏问题（包括 jQuery）答案

【问题标题】：Responsive Navbar Issue (jQuery included)响应式导航栏问题（包括 jQuery）
【发布时间】：2021-07-25 21:57:52
【问题描述】：

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

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

这里是代码笔：

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;
    }
  }

如果有人能推荐一个很棒的修复方法。

干杯

【问题讨论】：

标签： html jquery css responsive-nav

【解决方案1】：

问题是您将.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;
}

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

【讨论】：

您好。感谢您的贡献。我仍然有一些问题。当我最初在 iPad 断点的活动导航栏上按“关闭”时，虽然它仍然存在，但它会短暂地 .slideDown() （按钮）。此外，当您随后切换到移动断点时，导航列表中的 .always-btn 元素始终处于活动状态。您的帮助将不胜感激。谢谢
您好我已经进行了调整以解决动画仍然发生的问题。但是您能否澄清一下您希望在移动显示屏上显示哪些按钮，现在我将其作为“客户登录”和“预订免费电话”按钮，然后是汉堡包。当点击汉堡包时，您的“主页”、“服务”、“投资组合”和“博客”按钮会弹出。您是否希望“客户登录”和“预订免费电话”按钮仅在汉堡包处于活动状态时显示？
当我开始在 jQuery 中添加 .slide() 函数时，问题才开始出现。请查看我创建的这个新的代码笔，一切都可以正常工作：codepen.io/kingersnotepad/pen/YzVYVpp。我只是想要一些动画
查看新的答案，我认为它提供了您正在寻找的东西。请小心，因为它似乎在 codepen 之外对我不起作用。但是如果你只想在 codepen 中使用它应该没问题。