Javascript CSS:除非刷新，否则无法显示-导航栏

我一直在处理导航栏，最奇怪的问题出现了。
请使用链接来了解我的意思

要复制错误，请执行以下操作：

当桌面视图处于活动状态时，即当导航链接在一行中时，运行代码

然后调整屏幕大小，直到显示“单击我”

然后按它

现在，在看到“单击我”的同时运行代码，然后再次按下

JS信息

jQuery(document).ready(function($) {
    // UserCP 
    $('.rotate').on('click', function() {
        $(this).toggleClass("down");
    });
    $('.nav-start').on('click', function() {
        $("#nav2").removeClass("hidden");
        $('#nav2 li a').stop().slideToggle('100');
        return false;
    });
    $(document).ready(function() {
        $('#nav2 li a').stop().slideToggle('100');
    });

    $('body').on('click', function() {
        $('#nav2 li a').stop().slideUp('100');
    });
    $("#nav2 li a").click(function(e) {
        e.stopPropagation();
    });
    $(document).click(function(event) {
        if (!$(event.target).closest('#nav2 li a').length) {
            if ($('#nav2 li a').is(":visible")) {
                $('html, body').on('click', function() {
                    $('#nav2 li a').stop().slideUp('100');
                });
            };
        };
    });
});

---

修正-更新！谢谢@Louys Patrice Bessette@Titus@Rick

您在这个“点击我”

li

上使用了两个点击事件。
（一个在

.navstart

上，另一个在

.rotate

上）
这可能不是问题，但这会使代码更难阅读

然后，当您

滑动切换（）

时，如果希望子菜单向下滑动，则必须将其隐藏。
因为，由于删除了

隐藏的

类（可能在加载时有用），子菜单可见。
开关会隐藏它

我将您的脚本简化为此。
看看这个更新的

---

首先，我要删除当前

$（文档）中的
$.ready（function（）{
）{

。ready（function（$）{）那么预期的行为是什么呢？您对多个元素使用了相同的ID和无效的结束标记

，而不是

，但主要的问题似乎是您调用了

$（“#nav2 li a”）.stop（）.slideToggle（'100'）；

当菜单已经显示时。如果在“移动模式”下刷新它，它将非常有效在使用它之前。但是，如果进入桌面视图，然后缩小屏幕，它会出现小故障并打开和关闭。rick建议删除的功能是为了防止用户切换页面时页面保持打开状态。@Titus@rick

$（document）.ready（function（）{$（'#nav2 li a'）.stop（）.slideToggle（'100'）；}）

之所以存在，是因为在加载页面时，导航菜单将自动打开。即使删除此项，相同的错误仍然存在。一个问题是，只有双击或单击正文，导航菜单才会关闭。我希望能够使用与打开导航菜单相同的按钮（单击一次）关闭导航菜单。我之前遇到的一个问题是，它将在页面刷新时自动打开。@Louys Patrice BessetteI将其稍微更改为打开/关闭“单击我”。请忽略我最后的评论，我可以通过1简化CSS来解决我的问题，因为我正在使用许多ID标记@Titus谢谢。2简化JS@Louys Patrice Bessette@Rick Thank you。最后在Jquery（文档）后的脚本请求中添加

$（'#nav mobile ul li a'）.stop（）.slideUp（'100'）；

函数，这就是我的全部：）。

$(document).ready(function() {

  // Show submenu on "Click me"
  $('.nav-start').on('click', function() {
    $('.rotate').toggleClass("down");
    $("#nav2").removeClass("hidden");
    var subNav = $('#nav2 li a');

    if(subNav.css("display")=="block"){
      subNav.stop().slideUp('100');
    }else{
      subNav.stop().slideDown('100');
    }
  return false;
  });


  $("#nav2 li a").click(function(e) {
    e.stopPropagation();
  });

  // Hide submenu on document click
  $(document).click(function(event) {
    if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
      $('#nav2 li a').stop().slideUp('100');
    };
  });
});