javascript - 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为screen1的img。我已经思考了一段时间如何从这个 div 跳转到另一个 div。是否可以？如果我应该做一个，主 div 与 img 和 ul 列表？

Answer 1

嗨，我假设您想根据用户选择的数字显示不同的图像。我为你创建了一个 plunk 来看看如何做到这一点 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();
       }
   });
 });