Question

所以我目前正在建立自己的个人网站，并遇到了我的jQuery问题。我正在尝试创建一个响应式导航栏，它将在移动设备上消失，然后在您单击按钮时重新出现。我有移动端工作正常，但我想这样做，所以你可以在移动和桌面视图之间切换，导航只需切换到适合平台。如果你不关闭手机上的导航栏，然后将窗口滑动到桌面，但如果你在移动设备上关闭导航栏，它现在没有类，并且将显示：none;它工作正常。它需要显示的类显示，但由于某种原因，当我单击重置按钮时，我放置一个重置按钮来解决问题，即使设置jQuery为它添加显示类到我的导航，它什么都不做吧她是我设置的html文件。

<header>
    <a href="#menu" id="reset">Reset</a>
    <center>
        <h1 class="title">Theme</h1>
        <p class="kicker">Kicker</p>
        <a class="btn-a" href="#home">
            <span class="btn-1">Get Started Now</span>
        </a>
    </center>
</header>
<nav class="nav-bar" id="home">
    <div class="handle" id="click">
        <div id="hamburger" class="hamburglar is-closed">
            <div class="burger-icon">
                <div class="burger-container">
                    <span class="burger-bun-top"></span>
                    <span class="burger-filling"></span>
                    <span class="burger-bun-bot"></span>
                </div>
            </div>
            <!-- svg ring containter -->
            <div class="burger-ring">
                <svg class="svg-ring">
                    <path class="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
                </svg>
            </div>
            <!-- the masked path that animates the fill to the ring -->
        </div>
    </div>
    <ul id="menu">
        <a class="link" href="#contact">
            <li>Contact</li>
        </a>
        <a class="link" href="#services">
            <li>Services</li>
        </a>
        <a class="link" href="#home">
            <li>Home</li>
        </a>
    </ul>
</nav>

重置按钮的ID为reset。这是我的jQuery菜单

<!-- jQuery -->
    <script src="js\jquery-3.1.1.js"></script>
    <!-- My JavaScript and jQuery scripts -->
    <script>
    $(document).ready(function(){
      $('#click').on('click', function(){
        $('#menu').slideToggle(500).toggleClass('showing');
      });
    });
    </script> <!--End Script 1 -->
    <script>
    $(document).ready(function(){
      $('#reset').on('click', function(){
        $('#menu').addClass('showing');
      });
    });
    </script> <!--End Script 2 -->

有人可以帮我解决这个问题我不知道该怎么回事。

Answer 1

您可以通过CSS媒体查询克服这种情况。

@media (min-width: 992px) {
  #menu { display:block !important;}
}

您可以将最小宽度值设置为您希望显示菜单的预期屏幕。

如何解决我的jQuery问题

1 个答案: