的jQuery的slideToggle另一个DIV

Question

我有jQuery代码：

$(function() { 
 
     $('li').on('click', function(e) 
 
     { 
 
      e.stopPropagation();   
 
      e.preventDefault(); 
 
      alert($("a",this).data('number')); 
 
      $(this).parent().find('#screen1').slideToggle(); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content-slider"> 
 
      <div class="col-md-8 text-center"> <img src="img/screen1.jpg" id="screen1"> 
 
      </div> 
 
      <div class="col-md-4"> 
 
      <div class="box"> 
 
       <p>xyz</p> 
 
      </div> 
 
     <div class="features-content"><ul class="fa-ul features-list"> 
 
       <li><a href="#" id="list-1" data-number="1">1</a></li> 
 
      <li><a href="#" id="list-2" data-number="2">2</a></li> 
 
       <li><a href="#" id="list-3" data-number="3">3</a></li> 
 
       <li><a href="#" id="list-4" data-number="4">4</a></li> 
 
       <li><a href="#" id="list-5" data-number="5">5</a></li> 
 
       <li><a href="#" id="list-6" data-number="6">6</a></li> 
 
     </ul> 
 
       </div> 
 
      </div> 
 
     </div>

我想使用的slideToggle与ID屏蔽1的img目录。我一直在想如何从这个div跳到另一个。可能吗？如果我应该做一个，img和ul列表的主div？

Answer 1

嗨，我假设你想显示基于用户选择的数字不同的图像。我为你创造了一个庞然大物，看看如何做到这一点https://plnkr.co/edit/JeAiitqyhg2wlgejZB1N?p=preview。

$(function() { 
    $('li').on('click', function(e) 
    {var number=$("a",this).data('number'); 
     $('#screen'+number).slideDown(); 
     for(var i=0; i< $("#imageContainer > *").length;i++) 
     { 
     if(i != number) 
     $('#screen'+i).slideUp(); 
     } 
    }); 
}); 

Answer 2

不需要preventDefault为李我不认为，但你是否在寻找这样的东西？

$(function() { 
     $('li').on('click', function(e) { 
      var screenNum = $(this).find('a').data('number')); 
      $(this).parent().find('#screen' + screenNum).slideToggle(); 
     }); 
});