jQuery滾動並單擊div外部並隱藏div？

Question

我正在創造一種效果。 當用戶單擊div Check時，它將滾動到＃basket-page並顯示；當用戶單擊外部時，＃basket-page將隱藏。 唯一的問題是，當用戶單擊div第一次檢查時，＃basket-page會立即顯示並隱藏，如果我單擊第二次或第三次，則沒有問題。 我該怎么做才能解決此問題。

 jQuery(document).mouseup(function (e) { var container = jQuery("#basket-page"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.fadeOut(); } }); jQuery('#checkout_top').click(function(){ var basket_page=jQuery('#basket-page'); jQuery('#top_basket').html(basket_page); var position = jQuery("#myshop_wrap").position(); scroll(0,position.top); jQuery("#basket-page").show(); }); 

 <div id="#checkout_top">Check</div> <div id="basket-page"></div> 

Answer 1

如果我正確理解了該問題，則需要單擊一個檢查div，它將顯示並滾動到購物籃頁面div。 我相信正確的方法不是使用scroll（）函數，而是將您的身體頂部設置為＃basket-page div頂部的動畫

這應該工作

jQuery(document).mouseup(function (e) {
    var container = jQuery("#basket-page");
    var checkoutcontainer = jQuery('#checkout-top');
    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0  // ... nor a descendant of the container
    &&
    !checkoutcontainer.is(e.target)) //nor the checkout box itself

    {
        container.fadeOut(1000);
    }
});

jQuery('#checkout-top').click(function () {
    jQuery('#basket-page').show();
    jQuery('html, body').animate({
        scrollTop: jQuery("#basket-page").offset().top
    }, 1600);

});

看看這個JSfiddle，我為顏色添加了一些CSS並使代碼正常工作。 我還在mouseup事件中添加了一部分，因此它還包括檢查checkout div中是否發生了單擊。

注意：我鼓勵您在班級和ID名稱中使用破折號'-'代替下划線'_'。 鏈接以對此進行討論

希望這有所幫助

Answer 2

嘗試僅使用延遲：

 $('#checkout_top').click(function(){
            var basket_page=$('#basket-page');
            $('#top_basket').html(basket_page);

            var position = $("#myshop_wrap").position();
            scroll(0,position.top);
             $("#basket-page").delay(time in ms).show();
            });