Слайд-тумблер на динамическом контенте

Question

Слайд-тумблер на динамическом контенте

0

Я работаю над 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. Я хочу отобразить элементы и скрыть их соответственно.

epapath 18 сен. 2013, в 16:22

Источник

Теги:

javascript

jquery

html

slidetoggle

shopp

2 ответа

1

Просто покажите элементы .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/

Alvaro 18 сен. 2013, в 11:49

0

Спасибо @Alvaro! :)
epapath 18 сен. 2013, в 14:08
0

Я не знаю, какой ответ ты наконец выбрал, но ты должен принять хотя бы один.
Alvaro 18 сен. 2013, в 14:18
0

Оба ответа были великолепны! Спасибо вам, ребята! :)
epapath 18 сен. 2013, в 15:43
0

@epapath вы все равно должны принять один слева от каждого ответа, зеленую галочку ...
Alvaro 18 сен. 2013, в 15:52
0

Я знаю, что мой друг, но я получил первый ответ. Но ваш ответ тоже очень хороший. Я решаю, какой подход я буду использовать. Большое спасибо вам обоим.
epapath 18 сен. 2013, в 15:59
0

@epapath Я не видел другой ответ, помеченный как действительный. Теперь я делаю. Это хорошо.
Alvaro 18 сен. 2013, в 16:00

Показать ещё 4 комментария

Ещё вопросы

Я не знаю, какой ответ ты наконец выбрал, но ты должен принять хотя бы один.
Оба ответа были великолепны! Спасибо вам, ребята! :)
@epapath вы все равно должны принять один слева от каждого ответа, зеленую галочку ...
Я знаю, что мой друг, но я получил первый ответ. Но ваш ответ тоже очень хороший. Я решаю, какой подход я буду использовать. Большое спасибо вам обоим.
@epapath Я не видел другой ответ, помеченный как действительный. Теперь я делаю. Это хорошо.

tymeJV · Accepted Answer · 2013-09-18T11-14-00.000Z

Удалить display:none; от дочернего div #cart-info, иначе они не будут отображаться!

Демо: http://jsfiddle.net/tymeJV/P3WaC/1/

Именно эти: <[...] class="shopp" style="display: none;">
Спасибо tymeJV! Я был смущен! Я понял это :)
@epapath - Нет проблем ... Я был немного озадачен тем, почему сначала это тоже не сработало, потом я увидел это: D