Question

问题出在标题中。代码（不起作用）：

    $(document).ready(function(){
      $(window).resize(function() {
        windowsize = $(window).width();
          if (windowsize >= 1025) {
            $('.nav-menu> ul > li').click(function(){
              $(".nav-menu").slideToggle(400, function(){
            }else {

       });
      });
     });
    });

移动版和个人版<{p>中的nav-menu类相同

Answer 1

你可以尝试这个：使用css display none来关闭ul li。

$(document).ready(function(){
      $(window).resize(function() {
        windowsize = $(window).width();
          if (windowsize >= 1025) {
            $('.nav-menu> ul > li').click(function(){

              $(this).css({'display':"none"});
              $(this).toggleClass("close"); //or
              $(".nav-menu").slideToggle(400, function(){

              });
            });
            }else {}
     });
    });

Answer 2

代码结构不正确，给自己一个很好的代码编辑器，突出你的语法，这样你就可以轻松发现类似的问题。

$(document).ready(function () {

    $(window).resize(function () {

        windowsize = $(window).width();
        if (windowsize >= 1025) {

            $('.nav-menu> ul > li').click(function () {
                $(".nav-menu").slideToggle(400, function () {
                });
            })

        } else {
            //something else
        }

    });

});

此外，只有在用户调整窗口大小时才会添加事件侦听器，大多数用户不会真正调整窗口大小，特别是在移动设备上。删除调整大小代码或者在调整大小功能之外移动菜单切换代码，它将起作用。

$(document).ready(function () {

    $('.nav-menu> ul > li').click(function () {
        $(".nav-menu").slideToggle(400, function () {
        });
    })

});

请记住在此列表中包含一个菜单按钮，用于切换菜单，以便用户在没有导航的情况下不会卡住。

单击<li>中的链接（仅限移动设备）后，关闭导航菜单？

2 个答案: