Question

我有三张名为0,1和2的地图。
我有两个列表：1和2。
点击列表中的slideToggle，显示子列表。
只有隐藏列表2和1时才会显示地图0。即如果没有列表可见，则应该出现。
当subList1可见时，只显示地图1.
当subList2可见时，只显示地图2。

就我而言。如果单独单击列表1，它可以正常工作。它在列表1和0之间切换。它对第二个分组也是如此。一旦你从列表1到2点击它就会发生混乱。我根本无法理解它！请帮忙！

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSFiddle for reference

Answer 1

完成了（下面）。唯一的问题是它在野生动物园中有一个奇怪的闪烁，其中淡入/淡出时间重叠 - 不知道如何解决这个问题？

$("#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切换元素的可见性和幻灯片

1 个答案: