javascript - 仅滑动移动菜单

Question

我的移动菜单有问题。我的页面中有两个版本菜单 - 普通版和移动版。当我以正常大小 (PC) 打开我的页面时，我看到了很好的菜单。当我点击放大谷歌浏览器时，我看到了移动菜单。如果我单击按钮菜单以展开它的菜单，那么我会看到移动菜单。当我返回普通版页面时 - 然后我看不到菜单，无论是普通版还是移动版。为什么？

<nav>
<button class="toggle-menu"><img src="img/navicon.png""/></button>
<ul>
<li><a href="#">Zakladka1</a></li>
<li><a href="#">Zakladka2</a></li>
<li><a href="#">Zakladka3</a></li>
<li><a href="#">Zakladka4</a></li>
<li><a href="#">Zakladka5</a></li>
</ul>
</nav>

我尝试了这个 jQuery 代码，但效果不佳:

$(document).ready(function(){
    $(".toggle-menu").click(function(){
        $("ul").slideToggle("slow");
    });
    if ($(window).width() < 801) {
        $( "ul" ).click(function() {
            $( this ).slideUp();
        });
    }
});

问题出在哪里？

Answer 1

您的 HTML 已损坏。另外，您的 CSS 在哪里可以使其响应？

$(document).ready(function(){
    $(".toggle-menu").click(function(){
        $("ul").slideToggle("slow");
    });
    if ($(window).width() < 801) {
        $( "ul" ).click(function() {
            $( this ).slideUp();
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<button class="toggle-menu"><img src="img/navicon.png"></button>
<ul>
<li><a href="#">Zakladka1</a></li>
<li><a href="#">Zakladka2</a></li>
<li><a href="#">Zakladka3</a></li>
<li><a href="#">Zakladka4</a></li>
<li><a href="#">Zakladka5</a></li>
</ul>
</nav>