更多操作
（创建页面，内容为“function bindCollpase() { $('.collpased-container').each(function () { $(this).children('.collpased-head').after('<a href="#" class="collpased-a">▼点击展开▼</a>') $(this).children('.collpased-a').bind('click',{t:$(this)},function (event) { toggleCollapse(event.data.t) }) }) } function openAllCollapse(){ $('.collpased-container').each(function () { openCollapse($(this)) }) } function openCollaps…”） |
无编辑摘要 |
||
| （未显示同一用户的10个中间版本） | |||
| 第1行： | 第1行： | ||
function bindCollpase() { | function bindCollpase() { | ||
$('.collpased-container').each(function () { | $('.collpased-container').each(function (i,v) { | ||
$(this). | $(this).attr('id','collapsed-'+i) | ||
$(this).children('.collpased- | $(this).attr('defheight',$('.data-folded').height()) | ||
$(this).children('.collpased-title').bind('click',function(){ | |||
toggleCollapse('#collapsed-'+i) | |||
}) | }) | ||
}) | }) | ||
} | } | ||
function toggleCollapse(selector, openSpeed, closeSpeed){ | |||
openSpeed = openSpeed !== undefined ? openSpeed : 'fast' | |||
closeSpeed = closeSpeed !== undefined ? closeSpeed : 'fast' | |||
selector = $(selector) | |||
var defaultHeight = selector.attr('defheight')*1 | |||
var paddingHeight = 10 | |||
var targetHeight = defaultHeight + paddingHeight + selector.children('.collpased-content').height() | |||
console.log(defaultHeight,targetHeight) | |||
var currentHeight = selector.height() | |||
if(defaultHeight === currentHeight){ | |||
var | selector.animate({ | ||
height: targetHeight | |||
var | }, openSpeed,function () { | ||
selector.removeClass('data-folded') | |||
selector.css('height','auto') | |||
}); | |||
var | |||
}, | |||
function | |||
} | |||
}else { | }else { | ||
selector.animate({ | |||
height: defaultHeight | |||
}, closeSpeed); | |||
selector.addClass('data-folded') | |||
height: | |||
}, | |||
} | } | ||
} | } | ||
| 第107行： | 第39行： | ||
}) | }) | ||
} | } | ||
bindCollpase() | |||
2023年2月11日 (六) 16:46的最新版本
function bindCollpase() {
$('.collpased-container').each(function (i,v) {
$(this).attr('id','collapsed-'+i)
$(this).attr('defheight',$('.data-folded').height())
$(this).children('.collpased-title').bind('click',function(){
toggleCollapse('#collapsed-'+i)
})
})
}
function toggleCollapse(selector, openSpeed, closeSpeed){
openSpeed = openSpeed !== undefined ? openSpeed : 'fast'
closeSpeed = closeSpeed !== undefined ? closeSpeed : 'fast'
selector = $(selector)
var defaultHeight = selector.attr('defheight')*1
var paddingHeight = 10
var targetHeight = defaultHeight + paddingHeight + selector.children('.collpased-content').height()
console.log(defaultHeight,targetHeight)
var currentHeight = selector.height()
if(defaultHeight === currentHeight){
selector.animate({
height: targetHeight
}, openSpeed,function () {
selector.removeClass('data-folded')
selector.css('height','auto')
});
}else {
selector.animate({
height: defaultHeight
}, closeSpeed);
selector.addClass('data-folded')
}
}
function tollgeAllCo(){
$('.collpased-a').each(function () {
$(this).click()
})
}
bindCollpase()