Я работаю над jquery, и я пытаюсь использовать slideToggle в динамическом контенте, но я не могу сделать его слайдом. Как можно заставить его работать правильно? Я предоставлю вам http://jsfiddle.net/P3WaC/
<li class="pull-right">
<div class="text-righ padding-right">
<div class="chart">My cart (<span class="item_cart">3</span>)</div>
<button class="btn btn-warning">CHECKOUT</button>
<input type="text" class="input-large light-panel active-tab-search" placeholder="Search rewards">
</div>
<div id="cart-info" style="display: none;">
<div id="each-2" class="shopp" style="display: none;">
<div class="label">Gift voucher</div>
<div class="shopp-price">$<span class="itempr">20</span>
</div><span>Quantity: </span><span class="shopp-quantity">2</span>
<img src="../img/erop/remove.png" class="remove">
<br class="all">
</div>
<div id="each-3" class="shopp" style="display: none;">
<div class="label">Gift voucher</div>
<div class="shopp-price">$<span class="itempr">10</span>
</div><span>Quantity: </span><span class="shopp-quantity">1</span>
<img src="../img/erop/remove.png" class="remove">
<br class="all">
</div>
</div>
$('.pull-right').on('click',function(){
alert( $('#cart-info').text());
$('#cart-info').slideToggle('slow');
});
Динамический контент находится под cart-info. Я хочу отобразить элементы и скрыть их соответственно.
Удалить display:none;
от дочернего div #cart-info
, иначе они не будут отображаться!
Просто покажите элементы .shopp
перед перемещением родителя:
$('.pull-right').on('click',function(){
alert( $('#cart-info').text());
$('#cart-info').find('.shopp').show(); //added line
$('#cart-info').slideToggle('slow');
});
Живая демонстрация: http://jsfiddle.net/P3WaC/2/
<[...] class="shopp" style="display: none;">