响应导航栏问题(包括jquery)

我已经创建了一个React灵敏的导航栏。但是，在ipad断点期间，当您尝试关闭 :active 通过单击hamburger图标，连接的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;
    }
  }

如果有人能推荐一个修复方案，那就太好了。
干杯

问题是您正在分配 .active 向你所有的同学致意 .nav-items 其中包括要继续显示的两个按钮。
编辑：我已更改代码以修复动画问题，如果您正在寻找其他内容，请告诉我(这在codepen之外的任何地方似乎都不起作用（因为css是如何加载的）。
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（在tablet断点下）

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

checkout codepen以获取完整代码，尽管没有进行其他更改https://codepen.io/simar-ubhi/pen/eywywwa?editors=1100.

响应导航栏问题(包括jquery)

1条答案

相关问题

热门标签

最新问答