[英]jQuery slideToggle to another div
我有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跳到另一個。 可能嗎? 如果我應該做一個,用img和ul list主div?
嗨,我假設您想根據用戶選擇的號碼顯示不同的圖像。 我為您創建了一個插件,以了解如何完成此操作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();
}
});
});
li不需要preventDefault我不認為,但是您是否正在尋找類似的東西?
$(function() {
$('li').on('click', function(e) {
var screenNum = $(this).find('a').data('number'));
$(this).parent().find('#screen' + screenNum).slideToggle();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.