Jquery在打开新的div之前隐藏open div

时间:2013-06-28 07:29:13

标签: jquery

您好我有一个隐藏产品信息的产品列表,并且使用jquery来下载点击信息。问题是我想要上一个。用户点击其他产品时向上滑动的信息。

我让它关闭前一个,但它不会打开下一个。

以下是用户点击的链接以获取更多信息。

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

以下是hiden divs

    <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');
            }
        });
    }
});

});

1 个答案:

答案 0 :(得分: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');        
    })
});