Question

我正在使用jquery在我的页面中点击时展开隐藏的div。

我有另一个div，它是一个固定位置div，它是我页面中的标题。

我想要做的是扩展div，然后将此标题div和我的页面中的其他所有内容向下推，因为这个可扩展的div扩展了。

我已经尝试了固定div的相对位置，但我需要这个div始终出现在屏幕上，这就是为什么我给它一个固定的位置！

这是一个Jsfiddle，看看我的意思。

html结构是这样的：

<div align="center" class="boxs">
<p id="welcome">Welcome</p>
</div>
<div id="bubs" data-role="header" data-tap-toggle="false" data-position="fixed" data-theme='d'>
    <h1 id="reveal" class="header-title">Click Here</h1>
</div>

有人可以建议如何实现这个目标吗？

任何帮助将不胜感激。

Answer 1

我最近可以得到。

正如我所提到的，固定的div是固定的所以除非你告诉它，它不会去任何地方。你可以为顶部位置和边距等设置动画，但我想我更喜欢将位置属性从fixed切换到relative。

$('#a-sidebar').click(function() {
  $('#bubs').toggleClass('down');
  $('.boxs').slideUp('slow', function() {
    // Animation complete.

  });
});

$('#reveal').click(function() {
  $('#bubs').toggleClass('down');
  $('.boxs').slideToggle('slow', function() {
    // Animation complete.

  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.boxs {
  height: 300px;
  background-color: #333;
  padding: 10px;
  display: none;
}
#welcome {
  color: #F8F8F8;
  font-size: 24px;
}
#bubs.down {
  position: relative;
}
main {
  height: 250px;
  background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="boxs">
  <p id="welcome">Welcome</p>
</div>
<div id="bubs" data-role="header" data-tap-toggle="false" data-position="fixed" data-theme='d'>
  <h1 id="reveal" class="header-title">Click Here</h1>

</div>
<main></main>

Jquery：通过扩展Div来推动固定定位的div？

1 个答案: