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 の下にあります。アイテムを表示したり、それに応じて非表示にしたりします。

4

2 に答える 2

1

display:none;の子 div を削除し#cart-infoないと表示されません!

デモ: http://jsfiddle.net/tymeJV/P3WaC/1/

于 2013-09-18T13:42:27.563 に答える
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/

于 2013-09-18T13:44:38.973 に答える