您的位置:首页 > 运维架构

实例 (用到 阻止事件冒泡 event.stopPropagation();)

2013-02-16 17:53 561 查看
本实例的效果来自于http://uc.webdev.lesongapp.cn/recruit_shaoyang/
登录之后 搜索技能 展示结果  可点击搜索结果的某一列表 查看效果  其实是click之后一个展开和收缩的效果  只是每一个列表下面还有click事件
function showMoreInfo(){
var infoListItemNode = $('#search_results_container .results-list li');
infoListItemNode.click(function(e){
var thisNode = $(this),
networkSectionNode = thisNode.find('.network-info-section');
//e.stopPropagation(); 这个不用写,因为他是父元素了
if(networkSectionNode.is(':hidden')){
showNetworkUI(thisNode);
} else {
networkSectionNode.slideUp('slow');
}

});
}
function showNetworkUI(selection_id){
var parentNode = $(selection_id),
networkDetailsSection = parentNode.find('.network-details');
parentNode.find('.network-info-section').slideDown('slow');
//showWeiboContent(networkDetailsSection);
parentNode.find('.sns-item').each(function(){
var thisNode = $(this);
thisNode.click(function(e){
e.preventDefault();
e.stopPropagation();
networkDetailsSection.empty();
$.log(networkDetailsSection.children().length);
if(thisNode.hasClass('sina-weibo')){
showWeiboContent(networkDetailsSection);
} else if (thisNode.hasClass('tx-weibo')){
showTXWeiboContent(networkDetailsSection);
} else if (thisNode.hasClass('linkedin')){
showLinkedInContent(networkDetailsSection);
} else if (thisNode.hasClass('renren')){
showRenrenContent(networkDetailsSection);
} else if (thisNode.hasClass('kaixin')){
showKaixinContent(networkDetailsSection);
}
});
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐