Question

我一直在研究导航栏，并且发生了最奇怪的问题请使用JSFiddle链接查看我的意思。

要复制错误：

桌面视图处于活动状态时运行代码，即当导航链接在一行时。
然后调整屏幕大小，直到＆＃34;点击我＆＃34;显示。
然后按下它。
现在运行代码，同时看到＆＃34;点击我＆＃34;再按一下。

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');
                });
            };
        };
    });
});

固定 - 更新JSFiddle！谢谢@Louys Patrice Bessette @Titus @Rick

Answer 1

您在“点击我”li上使用了两个点击事件... ... （一个在.navstart上，另一个在.rotate上）这可能不是问题，但这会使代码更难阅读。

然后，当您slideToggle()时，如果您希望子菜单向下滑动，则必须将其隐藏。
因为，因为您删除了hidden类（可能在加载时有用），所以子菜单是可见的切换隐藏了它。

我简化了你的脚本。
请查看此更新的Fiddle。

$(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');
    };
  });
});

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

1 个答案: