调整 jQuery 手风琴事件中其他元素的大小

Question

我在 html 页面的 div 下方使用 div 和 table（在容器 div 内）。第一个div是手风琴

  $( function() {
$( "#resizeableDiv" ).accordion({
  collapsible: true,
  active:false'
});
 } );

单击 header 后，div 会折叠或展开。下面的 table 一直卡在 collapsed/expanded div 下面。

我想做的是，我希望 table 容器 div 高度在第一个 div 折叠时增加，并在扩展时减少，所以两个元素的大小保持不变。

我在论坛上做了一些研究，尝试通过在 accordion({}) 或 function({}) 中放置高度指令来自己做，但只要我是新手 jQuery , 它根本不起作用。

我已经坚持了一段时间，所以欢迎任何帮助！ :)

Answer 1

您可以绑定到 Activate event

例如，您可以使用激活事件滚动到顶部：

   $("#accordion").accordion({
  active: false,
  collapsible: true,
  heightStyle: "content",
  activate: function (event, ui) {
     if (ui.newHeader.length > 0) {
        var offset = ui.newHeader[0].offsetTop - 20;
        var bodyOffset = $(document).scrollTop();
        if (bodyOffset > offset) {
           $('body,html').animate({
              scrollTop: offset
           });
        }
     }
  }

Answer 2

对于那些感兴趣的人，这是我实施的解决方案。 hcham1 的回答也很有效。

$( function() { 
$( "#myDiv" ).accordion({
  collapsible: true,
  active:false,
  activate: function(event, ui) {
    if(ui.newHeader.text()!="") //Expanding (will be empty when the tab is collapsed
        $("#ScrollBody").animate({
        height: '-=420px'
        }, 1000);
    else //Collapsing
        $("#ScrollBody").animate({
        height: '+=420px'
        }, 1000);
}
});
});

调整 jQuery 手风琴事件中其他元素的大小

Resize other elements on jQuery accordion event

html

php

jquery

resize

accordion