我有两个彼此相邻的 div,想使用切换功能水平折叠一个 div(侧边栏),同时展开另一个 div( map )以占据前者的完整宽度。然后我需要切换来将两个 div 恢复到原来的宽度/位置。我可以让它执行第一个操作,但我不知道如何执行相反的操作。请参阅Fiddle :
$(document).ready(function(){
$("#toggle").click(function(){
$("#sidebar").animate({width: 'toggle'});
$("#map").animate({width: '100%'});
});
});
最佳答案
试试这个
HTML
<input type="button" data-name="show" value="Toggle" id="toggle">
脚本
$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).data('name') == 'show') {
$("#sidebar").animate({
width: '0%'
}).hide()
$("#map").animate({
width: '100%'
});
$(this).data('name', 'hide')
} else {
$("#sidebar").animate({
width: '19%'
}).show()
$("#map").animate({
width: '80%'
});
$(this).data('name', 'show')
}
});
});
关于jquery - 展开/折叠 div 的切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24199922/