这是我自己的答案：

起初，我尝试使用transitionend事件，但是事实证明解决该问题并不可靠；不是因为它本身并不可靠，而是因为导航高度在过渡结束后没有足够快地更新。

所以我求助于轮询和其他可靠运行的逻辑

let navContainer$ = $("div.navbar > div.container");
let collapsedDiv$ = $("div.navbar > div.container > div.collapse");

let intervalHandle;
//on hamburger click...
$("button.navbar-toggle").click(() => {

  let heightBeforeTrx = navContainer$.height();
  console.error( 'heightBeforeTrx:',heightBeforeTrx ) //= 50

  if (heightBeforeTrx === 50) {
      //we are moving from collapsed to Expanded...
      intervalHandle = setInterval( () => {
        console.log('Yo keep polling...')
        //we expect...a class 'collapse.in' to exist once expanded
        let test1 = collapsedDiv$.hasClass( "in" );
        if (test1) {
          //STOP THE POLLING...
          clearInterval(intervalHandle);
          console.log('polling ended.')
          $("body").css('padding-top','176px')
        }
      },100 )
  } else {
    //we are moving from Expanded to Collapsed...
      intervalHandle = setInterval( () => {
        console.log('Yo keep polling...')
        //we expect...a class 'collapse.in' to NOT exist once collapsed
        let test2 = collapsedDiv$.hasClass( "in" );
        if (!test2) {
          //STOP THE POLLING...
          clearInterval(intervalHandle);
          console.log('polling ended.')
          $("body").css('padding-top','50px')
        }
      },100 )    
  }
})

目前已经足够好了，应该相应地调整176像素硬编码；仅适合2个用例，当宽度变得更小时，还有其他可能的高度，但我会忽略这些高度；在从汉堡包点击扩展窗口后，如果需要手动调整窗口大小，还需要使用其他jQuery来推送内容。

这里是codepen，您可以在导航栏展开时看到css仅更改以将内容下推。我添加的唯一一件事是一个名为mycss的新CSS类（命名不正确，我同意:)）。您可以根据自己的确切要求更改媒体查询。

另外，值得一看的是bootstrap-4.3，因为看起来他们已经具备了类似的功能。