Question

我正在创造一种效果。当用户点击div Check时，它将滚动到＃basket-page并显示，当用户点击外面时，＃basket-page将隐藏。唯一的问题是，当用户点击div检查第一次，＃basket-page显示并立即隐藏，如果我第二次点击，或第三次，它没有问题。我该怎么做才能解决这个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果我正确理解了这个问题，你需要一个可以点击的check 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);

});

Check out this JSfiddle我为颜色添加了一些css并使代码正常工作。我还在mouseup事件中添加了一小部分内容，因此它还包括检查checkout div中是否发生了单击。

注意：我鼓励您使用短划线＆＃39; - ＆＃39;而不是下划线＆＃39; _＆＃39;在您的类和ID名称中。 Link有关此

的讨论

希望这有帮助

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

jquery滚动并单击div外部并隐藏div？

2 个答案: