[英]Close div onclick <a> jquery
我使用以下代碼顯示div onclick:
;(function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
})
.live('click', function () {
$(this).find('.m-link-close-button').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);
並使用此HTML:
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<a href="#" class="m-link-close-button"><span>x</span></a>
</div>
<a href="#" onclick="return false;" class="details m-link"></a>
</div>
這確實可以在onclick上顯示div,但是我想在div中使用X標記再次關閉div。 關閉div不起作用。
我在做什么錯,如何解決這個問題?
活動委托
$('.m-help').on('click', function (event) {
var close = $(event.target).closest('.m-link-close-button').length;
$(this).find('.m-text')[close ? 'hide' : 'show']();
});
在標簽上使用click事件來關閉div:
function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function () {
$(this).closest('.m-text').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);
您可以使用parent()
獲取關閉按鈕的parent()
因此您可以這樣操作:
(function($){
$('.m-help .m-text').hide();
$('.m-help').live('click', function(ev) {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function (ev) {
$(this).parent().hide();
});
})(jQuery)
試試這個:HTML
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<a href="#" class="m-link-close-button"><span>x</span></a>
</div>
<a href="#" onclick="return false;" class="details m-link">Click</a>
</div>
JS:
$(".m-text").hide();
$(".m-link").click(function () {
$(".m-text").show();
});
$(".m-link-close-button span").click(function () {
$(".m-text").hide();
});
工作提琴: http : //jsfiddle.net/cncf5Lz9/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.