2

こんにちは、製品情報が非表示になっている製品のリストがあり、jquery を使用してクリック時に情報を下にスライドさせます。問題は、前が欲しいということです。ユーザーが別の製品をクリックすると、情報がスライドアップします。

前のものを閉じるようにしていますが、次のものは開きません。

ユーザーが詳細情報を得るためにクリックするリンクは次のとおりです。

    <div class="list-op" target="<?php echo $i ?>" style="display:inline;"></div>

ここに秘伝のdivがあります

    <div id="div<?php echo $i ?>" class="targetDiv" style="display:none">
                <div class="list-image">
                    <a  href="<?php echo $_product->getProductUrl() ?>" class="product-image" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                        <img class="tTip" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(140, 183); ?>" width="140" height="183" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                    </a>
                </div>
    </div>

これがイベントのjqueryコードです

    jQuery(function ($) {
$('.list-op').click(function () {
    var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide.

    //Show the element if nothing is shown.
    if ($('.aktiv').length === 0) {
        $(itemid).slideToggle("slow");
        $(itemid).addClass('aktiv');

        //Hide the element if it is shown.
    } else if (itemid == "#" + $('.aktiv').attr('id')) {
        $('.aktiv').slideToggle("slow");
        $(itemid).removeClass('aktiv');

        //Otherwise, switch out the current element for the next one sequentially.
    } else {
        $('.aktiv').slideToggle(function () {
            $(this).removeClass('aktiv');
            if ($(".targetDiv:animated").length === 0) {
                $(itemid).slideToggle("slow");
                $(itemid).addClass('aktiv');
            }
        });
    }
});

});

4

1 に答える 1

1

jquery を次のように変更してみてください。

jQuery(function ($) {
    $('.list-op').click(function () {
        var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide.

        // this is already shown
        var stop = $(itemid).hasClass('aktiv')

        $('.aktiv').slideToggle("slow").removeClass('aktiv');

        if(stop) return;

        $(itemid).slideToggle("slow").addClass('aktiv');        
    })
});
于 2013-06-28T07:37:22.423 に答える