使用 javascript 切换元素的可见性和滑动

Question

我有三张地图，分别命名为 0、1 和 2。
我有两个列表：1 和 2。
点击列表 slideToggle，显示子列表。
仅当隐藏列表 2 和 1 时，才应显示地图 0。即当没有列表可见时应显示 0。
当 subList1 可见时，只应显示地图 1。
当 subList2 可见时，只应显示地图 2。

这是我所了解的。如果您单独单击列表 1，它会正常工作。它在列表 1 和 0 之间切换。它对第二个分组执行相同的操作。一旦您从列表 1 到列表 2 中单击，它就会变得混乱。我根本无法理解它！请帮忙！

$(document).ready(function(){

$("#listItem1").click(function(){
        $(".listSub1").slideToggle(500);
        $('.listSub2').slideUp(500); 
        $('.map_1').fadeToggle(500);
        
        if ($('.listSub1').is(':visible')){
               $('.map_0').fadeOut(500);
             } 
        if ($('.map_0').is(':hidden') && $('.listSub1').is(':visible')){
               $('.map_0').fadeIn(500);
             }
     });
     
     $("#listItem2").click(function(){
        $(".listSub2").slideToggle(500);
        $('.listSub1, .listSub3, .listSub4').slideUp(500); 
        $('.map_2').fadeToggle(500);
        
        if ($('.listSub2').is(':visible')){
               $('.map_0').fadeOut(500);
             } 
        if ($('.map_0').is(':hidden') && $('.listSub2').is(':visible')){
               $('.map_0').fadeIn(500);
             }
     });
});

ul {
  list-style-type:none;
}
.container{
  width:100%;
  background-color:white;
}
.trail_headings{
  border: 1px solid rgba(255, 255, 255, 0.7);
  text-align:center;
  background-color:none;
  width:95%;
  margin-left:0.5rem;
  border-radius:0.1rem;
  cursor:pointer;
  cursor:hand;
  display:block;
}
.listSub1,.listSub2{
  display:none;
}
.map_1, .map_2{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
          <ul>
          <!-- first list-->
              <li class="trail_headings" id="listItem1">
              <div><h1>Lake District</h1></div></li>     
              
              <li><div class="listSub1" id="1A">Grange to High Spy</div></li>
              <li><div class="listSub1" id="1C">Scaffel Pike</div></li>
              
              <!-- second list-->
              <li class="trail_headings" id="listItem2">
              <div><h1>Peak District</h1></div></li>
              
              <li><div class="listSub2">The Crowden Horseshoe</div></li>
              <li><div class="listSub2">Edale to Kinder Scout</div></li>
              
            </ul>
          </div>
          
<div class="map_0">
0
</div>
<div class="map_1">
1
</div>
<div class="map_2">
2
</div>
</div>

JSFiddle for reference

Answer 1

解决了（下）。唯一的问题是它在 fadein/out 时间重叠的 safari 上有一个奇怪的闪烁 - 不确定如何解决这个问题？

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

使用 javascript 切换元素的可见性和滑动

Using javascript to toggle visibility and slide of elements

javascript

fadeout

fadein

slidetoggle