使用javascript切换元素的可见性和幻灯片 我有三个名为0、1和2的地图 我有两个列表：1和2

单击“列表”幻灯片切换，显示子列表

仅当列表2和1被隐藏时，才应显示地图0。当列表不可见时，Ie 0应出现

当子列表1可见时，只应显示地图1

当子列表2可见时，只应显示地图2

这就是我所能做到的。如果单独单击列表1，则效果良好。它在列表1和0之间切换。它对第二个分组执行相同的操作。一旦你从列表1点击到列表2，这就是混乱。我一点也不懂！请帮忙

$（文档）.ready（函数（）{
$（“#列表项1”）。单击（函数（）{
$（“.listSub1”）。滑动切换（500）；
$（'.listSub2'）.slideUp（500）；
$（'.map_1'）.fadeToggle（500）；
如果（$（'.listSub1'）。是（':visible'））{
$（'.map_0'）。淡出（500）；
} 
如果（$（'.map_0'）是（':hidden'）&&（'.listSub1'）。是（':visible'））{
$（'.map_0'）.fadeIn（500）；
}
});
$（“#列表项2”）。单击（函数（）{
$（“.listSub2”）。滑动切换（500）；
$（'.listSub1.listSub3.listSub4'）.slideUp（500）；
$（'.map_2'）.fadeToggle（500）；
如果（$（'.listSub2'）。是（':visible'））{
$（'.map_0'）。淡出（500）；
} 
如果（$（'.map_0'）是（':hidden'）&&（'.listSub2'）。是（':visible'））{
$（'.map_0'）.fadeIn（500）；
}
});
});
ul{
列表样式类型：无；
}
.集装箱{
宽度：100%；
背景色：白色；
}
.trail_标题{
边框：1px实心rgba（255,255,255,0.7）；
文本对齐：居中；
背景色：无；
宽度：95%；
左边距：0.5雷姆；
边界半径：0.1rem；
光标：指针；
光标：手；
显示：块；
}
.listSub1、.listSub2{
显示：无；
}
.map_1、.map_2{
显示：无；
}



湖区
田庄给高级间谍
斯加菲尔梭子鱼

山顶区
克劳登马蹄铁
艾德尔到金德童子军

0
1.
2.
解决了它（如下）。唯一的问题是它在safari上有一个奇怪的闪烁，fadein/out时间重叠-不知道如何解决这个问题

$("#list1").click(function(){
       //slides
        $(".listSub1").slideToggle(500);
        $('.listSub0, .listSub2').slideUp(500); 
        //maps
        if ($('.map_0').is(':visible') || $('.map_2').is(':visible')){
               $('.map_0,.map_2,').fadeOut(0);
               $('.map_1').stop().fadeIn(500);
             }
        else {
               $('.map_1').fadeOut(0);
               $('.map_0').fadeIn(500);
             } 
     });