时间戳

首页 > 解决方案 > 使用 javascript 切换元素的可见性和滑动

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

问题描述

这是我所得到的。如果您单独单击列表 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 供参考

标签： javascriptfadeinfadeoutslidetoggle

解决方案

解决了（下）。唯一的问题是它在淡入/淡出时间重叠的 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);
             } 
     });

推荐阅读