Question

我正在尝试在我正在处理的网站上添加免责声明部分。我希望每个页面底部都有一个类似标签的按钮，可以打开一个文本区域。

我搜索了一下codepen.io，发现了一种非常简单的方法。删除不相关的语法后，我尝试将标签从页面顶部移动到底部。

这是我遇到问题的地方。当标签位于页面顶部时，文本区域会在单击时按下标签。

现在它位于底部，textarea显示在标签上方，因为标签本身位于页面底部。

如何确保选项卡下方弹出文本区域，推动标签？

$(document).on('click', '#menu-tab', function() {
  $('#menu-nav').slideToggle('slow');
});

body {
  background-color: #333333;
  text-align: center;
}
#menu-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#menu-tab {
  background-color: #FC4349;
  cursor: pointer;
  margin: 0% 45% 0% 45%;
  padding: 5px 10px;
}
#menu-nav {
  display: none;
  background-color: #FC4349;
  margin: 0% 30% 0% 30%;
}

<body>
  <div id="menu-wrapper">
    <div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
      <br>disclaimertextdisclaimertextdisclaimertext</div>
    <div id="menu-tab" class="closed">Disclaimer</div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>

如果我的描述没有给出情况的清晰图像：

屏幕顶部的

标签 Tab at the top the of screen

屏幕底部的标签 Tab at the bottom of the screen

Answer 1

将包含免责声明的html移至标签下方

（Demo）

<div id="menu-wrapper">
  <div id="menu-tab" class="closed">Disclaimer</div>
  <div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
    <br>disclaimertextdisclaimertextdisclaimertext</div>
</div>

如何更改此滑动文本区域的位置？

1 个答案: