Javascript 我如何使两个无序列表在单击菜单时淡入淡出，具体取决于显示的菜单？

我有一个菜单，3个div嵌套在一个div中，我试图让两个不同的无序列表淡入或淡出，这取决于单击时显示的列表。它几乎可以工作，但是在我第一次点击菜单后，每隔一次，两个列表一起淡入，而不是一个

HTML和CSS都很好，但在js中，我尝试了几种不同的代码来让它工作，但这是我能让它工作的最接近的代码

$（文档）.on（'单击'，'菜单'，函数（））
{ 
$（“.pagelinks”）.fadeOut（'slow'，function（）{
$（“.homelinks”）.fadeIn（'slow'）；
});
});
$（文档）。在（'单击'，'菜单'，函数（）上）
{ 
$（“.homelinks”）.fadeOut（'slow'，function（）{
$（“.pagelinks”）.fadeIn（'slow'）；
});
});             
html，正文
{
保证金：0；
宽度：100%；
溢出：隐藏；
框大小：边框框；
身高：100%；
}
身体
{
背景：url（best8.jpg）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
标题
{
宽度：100%；
背景色：黑色；
高度：85px；
位置：固定；
}
h1
{
颜色：白色；
位置：相对位置；
对齐内容：居中对齐；
保证金：3em；
顶部：100px；
左：595px；
}
.logo img
{
左：0；
滤光片：亮度100%；
位置：固定；
}
.菜单
{
保证金：自动；
左缘：77%；
显示：块；
位置：固定；
顶部：11px；
}
.导航部
{
高度：5px；
背景色：白色；
保证金：4px0；
边界半径：25px；
过渡：0.3s；
}
.导航
{
宽度：30px；
显示：块；
利润率：1米0
}
.一
{
宽度：30px；
}
.二
{
宽度：20px；
}
.三
{
宽度：25px；
}
.导航：悬停div
{
宽度：30px；
}
.导航：悬停{
光标：指针；
}
.网页链接
{
保证金：自动；
左缘：37%；
位置：固定；
顶部：-10px；
显示：无；
}
.PAGEUL链接
{
列表样式类型：无；
}
李国宝先生
{
浮动：左；
填充：30px；
保证金：自动；
颜色：白色；
字体大小：20px；
字体大小：粗体；
填充顶部：40px；
不透明度：0.6；
}
.pagelinks ul li:悬停
{
颜色：绿色；
过渡：0.6s；
}
.logo img：悬停
{
不透明度：0.6；
}
.家庭链接
{
保证金：自动；
左边缘：54%；
位置：固定；
顶部：-10px；
显示：块；
}
.homelinks ul
{
列表样式类型：无；
}
李先生
{
显示：内联块；
填充：30px；
保证金：自动；
颜色：白色；
字体大小：20px；
字体大小：粗体；
填充顶部：40px；
}
.homelinks ul li:悬停
{
颜色：深蓝；
过渡：0.6s；
}

戈斯塔计算器
尝试{Typekit.load（{async:true}）；}catch（e）{}




估计规划你的未来。
这看起来像是可以使用
toggleClass（）函数的情况。在其中一个
元素上创建并应用
.visible
类。在click事件上，执行类似于
$（'nav'）.toggleClass（'visible'）
的操作。请参阅。
这正是Javascript的异步特性。当您第一次单击“.menu”时，将调用两个在事件循环中堆叠的回调函数，当它们执行“.homelinks”和“.pagelinks”时，会发生什么情况。
您需要做的只是将一个名为'visible'的类指定给这两个类中的任何一个（'.homelinks'或'.pagelinks'）在您的函数中，只需检查可见的元素类-淡出此元素，淡入另一个元素，然后将可见的类切换到另一个元素，并从原始元素中移除可见的类

For instance
initially - '.homelinks' has visible
            '.pagelinks' does not have it

Now on click event
fadeout - element with visible class ('.homelinks')
fadein  - the other element ('.pagelinks')
remove  - visible class from '.homelinks'
add     - visible class to '.pagelinks'

在这里查看代码笔

$('.menu').click(function()
{ 
  console.log("clickk");
    let pl  = $('.pagelinks');
    let hl  = $('.homelinks');
    if(pl.hasClass('visible')){
      pl.fadeOut('slow',function(){
        hl.toggleClass('visible');
        pl.toggleClass('visible');
        hl.fadeIn('slow',function(){});
      });
    }else{
      hl.fadeOut('slow',function(){
        hl.toggleClass('visible');
        pl.toggleClass('visible');
        pl.fadeIn('slow',function(){});
      });
    }

});