2015-06-14 117 views
0

我正在创建一个效果。当用户点击div检查时,它将滚动到#basket-page并显示,当用户点击外部时,#basket-page会隐藏。唯一的问题是,当用户点击第一次检查div时,#basket-page会立即显示并隐藏,如果我点击第二次或第三次,它没有问题。我能做些什么来解决这个问题。jquery滚动并点击div的外部并隐藏div?

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

 
<div id="basket-page"></div>

+0

这段代码为你做些什么? – Amit

回答

2

如果我理解正确的问题,你要检查的div你可以点击,它会显示并滚动你的篮子网页div。我认为,正确的方法是不使用滚动()函数,但你的身体的顶部动画在您的#篮页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中是否出现点击的检查。

注意:我鼓励你在班级和ID名称中使用破折号' - '而不是下划线'_'。 Link对这个

希望讨论这有助于

+0

非常感谢! – conan

0

尝试使用只有延迟:

$('#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(); 
      }); 
+0

它不起作用。 – conan

+0

您是否导入了JQuery库?如果你用$ –

+0

替换JQuery,我不知道为什么,我使用WordPress,我必须使用jQuery而不是$。 – conan