使用jQuery单击隐藏父div [英] Hide parent div on click using jQuery
本文介绍了使用jQuery单击隐藏父div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我正在尝试编写一个超级简单的脚本,允许用户在div内部抛出类 .close
的任何链接或按钮,以及单击 .close
链接后,它会自动关闭父容器。
So I'm trying to write a super simple script that will allow a user to throw any link or button with the class .close
inside of a div, and when that .close
link is clicked, it automatically closes the parent container.
以下是我目前正在尝试使用的内容: JSFiddle
Here is what I'm currently trying to work with: JSFiddle
我目前正在尝试使用的代码是:
The code that I am currently trying to use is:
HTML
<div class="well notice bg-green">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<p>This is a notice that is green.</p>
</div>
CSS
.well {
background: #f9f9f9;
border-color: #f1f1f1;
border-style: solid;
border-width: 1px;
padding: 15px 20px;
}
.notice {
margin: 15px 0;
padding: 0px 15px;
}
.well.bg-green {
background: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.close {
color: #000;
filter: alpha(opacity=20);
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
margin-top: 15px;
opacity: .2;
text-shadow: 0 1px 0 #fff;
}
.close:hover, .close:focus {
color: #000;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
text-decoration: none;
}
button.close {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
JavaScript(jQuery)
$('.close').live("click", function () {
$(this).parents('div').fadeOut;
});
如果我的问题没有意义或需要进一步详细说明,请告诉我。谢谢!
Let me know if my question doesn't make sense or if any more elaboration is needed. Thank you!
推荐答案
两个问题:
-
live()
在您的小提琴中的jQuery版本中不存在(在1.7中已弃用,在1.9中删除) -
fadeOut
是一个函数(你缺少执行它的parens)
live()
doesn't exist in the version of jQuery in your fiddle (deprecated in 1.7, removed in 1.9)fadeOut
is a function (you were missing parens to execute it)
$('.close').on("click", function () {
$(this).parents('div').fadeOut();
});
如果您希望它适用于动态元素,请使用此版本:
If you want it to work on dynamic elements, use this version:
$(document).on('click', '.close', function () {
$(this).parents('div').fadeOut();
});
这篇关于使用jQuery单击隐藏父div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文