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在哪里做出响应？

＆＃13;

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

＆＃13;

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

＆＃13;

仅滑动移动菜单

1 个答案: