标签:
一、问题
题目及答案展示:要求,点击题目,展开答案。如下:
展开前
展开后
最开始使用的toggle方法来实现
$(".content_problem").toggle( function(){ $(this).find(".answer").slideDown(); }, function(){ $(this).find(".answer").slideUp(); } );
这个很容易实现效果,但是导致“删除”按钮无法点击,因为冒泡事件。
我尝试了使用event.stopPropagation();来组织冒泡,但是没有达到效果。
二、解决
通过判断元素属性是否是hidden来使用slideDown()和slideUp()
$(document).on("click",".content_problem",function(){ var $answer = $(this).find(".answer"); if ($answer.is(":hidden")) { $answer.stop(true,true).slideDown(); } else { $answer.stop(true,true).slideUp(); } });
这样实现delete方法时就不用考虑冒泡事件了。
function deleteQuestion(){ $(".delete").live("click",function(){ var questionId = $(this).parents(".content_problem").find(".questionid").val(); var area = $("this").parents(".content_problem"); $.ajax({ url : "${ctx}/exercise/deleteWrongQuestion", type : "POST", dataType : "html", data : { "questionId" : questionId, }, success : function(data) { if(data!=0){//返回非0值证明执行成功,需将总题目数量减一,并将该题从页面上移除 var total = parseInt($(".conTitle").html())-1; $("#pageCount").val(total); $(".conTitle").html(total); $(".page").trigger(‘reloadPage‘,Math.ceil(total/5));//重新分页 }else{ Tosn.info({ title : "提示", cont : "网络异常,请稍后再试" }); } } }); return false; }); }
js冒泡事件的特例toggle无法实现阻止冒泡——slideDown()和slideUp()
标签:
原文地址:http://www.cnblogs.com/brolanda/p/4523896.html