如何在jquery上显示/隐藏项目
如何在jquery上显示/隐藏项目
提问于 2015-11-03 08:24:11
我想显示某个div点锚，然后再隐藏锚点的div onclick，下面是我的代码：
jQuery('.mycart').click(function(e){
e.preventDefault();
var target = jQuery(".basket");
if(target.is(':visible'))
jQuery('.basket').css('cssText', 'display: none !important');
else
jQuery('.basket').css('cssText', 'display: block !important');
});
jQuery(document).mouseup(function (e){
var container =jQuery(".basket");
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.hide();
}
});html：
<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
<span class="callout-arrow"></span>
<div class="basketcount"><span>5</span></div>
<button type="button" class="checkoutbtn">checkout</button>
</div>div成功地在单击上显示，但它不会再次隐藏。该问题是由第二个函数引起的，当用户单击容器外部时，该函数正在隐藏容器。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-11-03 09:05:08
我找到了解决方案，只要阻止mouseup()函数来隐藏容器，如果单击的目标是锚点$('.mycart')，那么当用户单击此锚时，这个锚点的click()函数将被正常地应用并隐藏容器(如果显示的话)，下面是新的jquery：
jQuery('.mycart').click(function(e){
e.preventDefault();
var target = jQuery(".basket");
if(target.is(':visible'))
jQuery('.basket').css('cssText', 'display: none !important');
else
jQuery('.basket').css('cssText', 'display: block !important');
});
jQuery(document).mouseup(function (e){
var container =jQuery(".basket");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0 && !jQuery('.mycart').is(e.target)) // ... nor a descendant of the container or .mycart anchor
{
container.hide();
}
});Stack Overflow用户
发布于 2015-11-03 08:34:08
你的代码有效。无论如何，我还增加了另外两个解决方案：
jQuery('.mycart').click(function(e){
e.preventDefault();
$(".basket").slideToggle(800);
});http://codepen.io/damianocel/pen/avjVGQ
我已经评论掉了一个，试着看看你最喜欢哪一个。
Stack Overflow用户
发布于 2015-11-03 08:30:09
在JQuery中使用此代码
$('.mycart').click(function() {
if($('.basket').is(':visible')) {
$('.basket').hide()
}
else {
$('.basket').show()
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33494373
复制相关文章
相似问题
腾讯云开发者
