0

このサイトのさまざまな場所からスクリプトをまとめようとしていますが、まだ機能していません。私が行う必要があるのは、divをクリックして、オーバーレイdivを下にスライドさせることです。別のdivがクリックされた場合は、前のdivを閉じて、次のdivを下にスライドします。これが私の一種の実用的なフィドルです：http：//jsfiddle.net/G94Vm/

HTML：

<div class="item">
    <div class="item-overlay"></div>        
</div>
<div class="item">
    <div class="item-overlay"></div>
</div>

脚本：

$(document).ready(function () {
var open = $('.item'),
    a = $('div').find('.item-overlay');
open.click(function(){
    var $this = $('.item-overlay', this),
        speed = 300;
    $this.addClass('active').slideDown(speed);
    if ($this.hasClass('active') === true) {
        $this.removeClass('active').next('.item-overlay').slideUp(speed);
    } else if (a.hasClass('active') === false) {
        $this.addClass('active').next('.item-overlay').slideDown(speed);
    } else {
        a.removeClass('active').next('.item-overlay').slideUp(speed);
        $this.addClass('active').next('.item-overlay').delay(speed).slideDown(speed);
    }
});

}）;

これは私が取り組んでいるサイトです：これは現在この基本的なスクリプトを使用しています：

$(document).ready(function () {
$('.item', this).click(function () {
    $('.item-overlay', this).slideToggle('400', function () {
        // end animation
    });
});

}）;

私はまだjQueryを学んでいて、何が間違っているのか理解できません。何時間もこれにいて、どんな助けでも大いに感謝されるでしょう。

ありがとう！ジョン

4

3 に答える 3

1

.item-overlay私の理解では、親.itemdivがクリックされたときに、内部のdivを下にスライドさせたいと思います。また、他のdivが表示されている場合は.item-overlay、それらすべてを閉じることができますか？

これが実際の例です。slideUpアニメーションは、現時点では少しバグがありますが、これにより、目的のアニメーションが得られる可能性があります（slideDownの代わりにslideToggleを使用するように更新されています）。

$('.item').click(function () {
    $(this).find('.item-overlay').slideToggle('300').addClass('active');
    $(this).siblings().find('.active').each(function () {
        $(this).slideUp('300').removeClass('active');
    });
});
于 2013-03-23T21:57:57.873 に答える
0

フィドルを更新しました：

http://jsfiddle.net/G94Vm/10

ifこのすべてのステートメントは必要ありません。次のオーバーレイを下にスライドする前に、すべてのオーバーレイを閉じてください。

$(document).ready(function () {
 $('.item').click(function(){
    var element = $('.item-overlay', this);
    var speed = 300;
    $('.item-overlay').removeClass('active').slideUp(speed);
    element.addClass('active').slideDown(speed);
});
});

そして、あなたは削除する必要があります

.item-overlay {
    display:none;
}

あなたはそれを下にスライドさせたいので、それが下にスライドするまでそれが隠されている場合、それは不可能です。

于 2013-03-23T21:56:43.387 に答える
0

あなたは実際にnext間違った方法を使用しています。jsFiddleを書き直して、アニメーションを実行し、必要なときに停止し、アクティブなオーバーレイを閉じるはずの外側のクリックをリッスンします。

リンクは次のとおりです。http：//jsfiddle.net/alexis_tondelier/Gf2dv/

そして現在のJSコードは：

$(document).ready(function () {
    var $active,
        togglerSelector = '.item',
        toggledSelector = '.item-overlay',
        $items = $(togglerSelector),
        animationDuration = 300,
        activeClassName = 'active',
        activeStyle = {height: 300},
        notActiveStyle = {height: 0}
        hideActive = function() {
            $active && $active
                .stop()
                .animate(notActiveStyle, function() {
                    $(this).removeClass(activeClassName).hide();
                });    
            $active = void 0;        
        },
        showActive = function($element) {
            $element && ($active = $element)
                .stop()
                .show()
                .animate(activeStyle)
                .addClass(activeClassName)
        };

    $items.on('click', function(event) {
        var $this = $(this),
            $overlay = $this.children(toggledSelector),
            theSame = $overlay.is($active);
        hideActive();
        theSame || showActive($overlay);
        }
    });
    $(this).on('click', function(event) {
        var $target = $(event.target),
            isOutClick = !$target.closest(togglerSelector).length;
        isOutClick && hideActive();
    });
});

それはあなたが望むように動作するはずです。

于 2013-03-23T22:10:00.910 に答える