jQuery的：切换2内1个表格单元格

example diagram jQuery的：切换2内1个表格单元格

DIV高度所以我有一个表格单元格内2周的div。 1格在上面，1在下面。底部的一个是不可见的，所以顶部div占据了表格单元格的整个高度。当一个按钮被点击时，底部div变得可见，顶部div减小它的高度，为底部div创造空间。这样，当按钮再次点击时底部div隐藏，顶部div占据单元格高度。

这是我有什么，但它是一个失败：

$('#button').click(function(){ 

    $('#bottomdiv').toggle(function(){ 
     $("#topdiv").animate({height:250},200); 
    },function(){ 
     $("#topdiv").animate({height:400},200); 
    }); 

});

感谢您的帮助，演示的jsfiddle不胜感激！

来源

2012-09-17 Quaking-Mess

你应该张贴您的HTML/CSS为好。也许你可以开始自己的小提琴，我们可以帮助纠正它。 – Dan

好主意，我认为我的图表就足够了，但我会开始为他人参考提琴。 –

如果其中一个答案解决了您的问题，请将其标记为您的答案。否则，请告诉我们您希望看到的更多内容，或者为什么答案不被您接受。 – iX3

$('body').on('click', '#button', function(){ 
    $('#topdiv').animate({ 
    height : '250px' 
    }, { 
    duration : 200, 
    complete : function(){ 
     $('#bottomdiv').animate({ 
      height: '400px' 
     }, 200); 
    } 
    }); 
});

来源

2012-09-17 12:51:47 JanHocevar

您近了 - 我想您只需要将您的“点击”处理程序更改为“切换”即可。例如：(JS Fiddle)

jQuery(document).ready(function($) { 
    $('#button').toggle(function() { 
     // Show bottom 
     $("#topdiv").animate({ 
      height: 400 
     }, 200); 
     $("#bottomdiv").slideUp(); 
     //console.log("bottom shown:", $("#bottomdiv")); 
    }, function() { 
     // Hide bottom 
     $("#topdiv").animate({ 
      height: 250 
     }, 200); 
     $("#bottomdiv").slideDown(); 
     //console.log("bottom hidden:", $("#bottomdiv")); 
    }); 
});

来源

2012-09-17 12:55:08 iX3

JanHocevar使用.on（）方法，我也推荐它，因为它现在是首选方式，但我不确定您使用的是哪个版本的jQuery。 http://api.jquery.com/on/ – iX3

我也建议考虑使用.toggleClass（）方法并用CSS设置动画内容。这不仅可以改善逻辑/用户界面的分离，还可以防止初始状态不符合您预期的故障（例如，在本例中，尝试向底部div添加display：none - 即使它第一次“隐藏”已经隐藏，但之后再次点击它将同步） http://api.jquery.com/toggleClass/ – iX3

jQuery的：切换2内1个表格单元格

回答

相关问题