Использование JavaScript для переключения видимости и скольжения элементов - PullRequest
Новая
       43

Использование JavaScript для переключения видимости и скольжения элементов

0 голосов
/ 12 мая 2018
  • У меня есть три карты с именами 0, 1 и 2.
  • У меня есть два списка: 1 и 2.

  • Списки скользят по клику, открывая подсписки.

  • Только карта 0 должна появляться только в том случае, если списки 2 и 1 скрыты.Т.е. 0 должно появляться, когда списки не видны.

  • Только карта 1 должна отображаться, когда виден subList1.

  • Только карта 2 должна отображаться, когда виден subList2.

Это насколько я понял.Это работает нормально, если вы нажимаете список 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 для справки

1 Ответ

0 голосов
/ 12 мая 2018

Разобрался (ниже).Единственное, что у него странное мерцание на сафари, где время исчезновения / перекрытия перекрывается - не знаете, как решить эту проблему? 

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