如何使用 jQuery 将包含灵活高度菜单的选项卡固定在窗口底部并在单击时向上滑动？

Question

我尝试根据互联网上的研究自己编写代码。我能够把它固定在底部。点击时，确实会滑出菜单；但当它应该向上推动选项卡以显示菜单时，它却向下滑出。如果我使用负边距并简单地更改bottom: -150为bottom: 0px单击，它确实会通过将其从窗口底部向上滑动来产生所需的行为，并且它会正确显示。但这意味着菜单将页面推过页面底部，而不是简单地隐藏。因此，当它“隐藏”时，人们只需向下滚动即可看到完整的菜单，但事实并非如此。

因此，bottom我尝试使用 来操作它，而不是使用$(this).show("slide"). 由于使用了滑动动画，菜单看起来扭曲了。

这是片段：

var supTabState = false;

$("#dccontainer").css('bottom', '-150px');

$("#dcsupporttab").click(function() {

  $('#dcsupportcontainer').slideToggle(500, function() {

    //execute this after slideToggle is done

  });

  supTabState = !supTabState;

  if (supTabState) {

    //    $("#dccontainer").css('bottom', '0px');

    $(this).show("slide", {

      direction: "down"

    }, 1000);

  } else {

    //    $("#dccontainer").css('bottom', '-150px');

    $(this).show("slide", {

      direction: "up"

    }, 1000);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="dccontainer">

  <p id="dcsupporttab">Support</p>

  <div id="dcsupportcontainer">

    <div class="dcbutton" id="dcaslnow">

      <a href="#" class="dcthelabel">ASL Now</a>

    </div>

    <div class="dcbutton" id="dctextchat">

      <a href="#" class="dcthelabel">Text Chat</a>

    </div>

    <div class="dcbutton nonsolid" id="dcmessageus">

      <a href="#" class="dcthelabel">Send Us a Message</a>

    </div>

    <p id="dcvpinfo">Video Chat: [phone]</p>

  </div>

</div>

我尝试过各种技术。我尝试过使用 CSS 动画单独切换 CSS toggleClass，我尝试过使用slide，并且我尝试过使用slideToggle. 我也尝试使用display: block;而不是使用flexbox。两者具有相同的效果。研究互联网产生了几种可能的解决方案（我已经尝试过，但所有结果都相同），并且这些解决方案通常不是基于固定在窗口底部的元素。唯一最接近我正在寻找的东西的是：

http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html

但奇怪的是，当我尝试使用相同的代码时，什么也没发生。单击没有调出菜单。此时我不知所措。我哪里错了？

这是我最新的尝试（使用上面的代码）：https ://codepen.io/doncullen/pen/JjdrxzY

Answer 1

回答你的问题我哪里出错了：你在 上指定了 200px 的固定高度#dccontainer。为容器指定固定高度会使 jQueryslideToggle失去作用。jQuery 对slideToggle给定元素的高度进行动画处理，在您的情况下，您正在对#dcsupportcontainer. 即使您#dcsupportcontainer使用 动画将高度设置为 0px slideToggle，整个支撑块的高度仍将保持 200px。这导致当消失时整个块不会向下移动。#dcsupportcontainer当然，您可以手动计算并将新bottom值分配给#dccontainer，但这确实很麻烦而且非常不直观。不想bottom自己计算该值，我不会设置高度#dccontainer，只是让它的高度不变。它将根据其所有子项的要求设置其高度（默认值为auto）。fixed此外，您没有使用 ，而是使用absolute. 您应该fixed在此处使用，因为您希望支撑块始终可见（即使用户向下滚动）；这意味着您应该根据您的视口而不是元素来定位它。我还对您的 CSS 样式做了一些细微的调整，使其更加简洁。这是一个可行的解决方案：// First time accessing, hide the support buttons section$('#dcsupportcontainer').hide()$("#dcsupporttab").click(function() {  $('#dcsupportcontainer').slideToggle(500)});* {  box-sizing: border-box;  margin: 0;}body {  min-width: 100vw;  min-height: 100vh;}#dccontainer {  position: fixed;  left: 50%;  bottom: 0px;  transform: translateX(-50%);  display: flex;  flex-direction: column;  align-items: center;  width: 50vw;  min-width: 200px;  font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';}#dccontainer * {  padding: 7px 20px;  text-align: center;}#dcsupporttab {  font-weight: bold;  border-radius: 5px 5px 0 0;  background: #121212;  color: #ffffffee;  cursor: pointer;}#dcsupportcontainer {  border: 1px solid #121212;  border-radius: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="dccontainer">  <p id="dcsupporttab">Support</p>  <div id="dcsupportcontainer">    <div class="dcbutton" id="dcaslnow">      <a href="#" class="dcthelabel">ASL Now</a>    </div>    <div class="dcbutton" id="dctextchat">      <a href="#" class="dcthelabel">Text Chat</a>    </div>    <div class="dcbutton nonsolid" id="dcmessageus">      <a href="#" class="dcthelabel">Send Us a Message</a>    </div>    <p id="dcvpinfo">Video Chat: [phone]</p>  </div></div>

Answer 2

只需从主容器 #dccontainer 获取固定高度，一切都会好起来的。您还应该删除几行 javascript 代码来修复所有问题。dccontainer 的固定高度使得整个导航从页面底部向上 200px，这使得您可以使用更多的 jQuery 来将其固定在底部。请记住，bottom: 0px 会将元素的底部设置在其容器的 0px 底部。$("#dcsupporttab").click(function() {&nbsp; $('#dcsupportcontainer').slideToggle(500, function() {&nbsp; &nbsp; //execute this after slideToggle is done&nbsp; });});#dccontainer {&nbsp; position: absolute;&nbsp; bottom: 0px;&nbsp; width: 300px;&nbsp; left: 50%;&nbsp; margin-left: -150px;&nbsp; transition: .5s;&nbsp; overflow: hidden;}#dccontainer * {&nbsp; margin-top: 0;&nbsp; margin-bottom: 0;&nbsp; padding-top: 0;&nbsp; padding-bottom: 0;&nbsp; font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';&nbsp; font-weight: bold;&nbsp; /* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */}#dcsupporttab {&nbsp; background-color: #f5f5f5;&nbsp; color: #434343;&nbsp; text-align: center;&nbsp; width: 150px;&nbsp; padding: 10px;&nbsp; padding-bottom: 3px;&nbsp; margin: auto;&nbsp; border-top-left-radius: 10px;&nbsp; border-top-right-radius: 10px;&nbsp; cursor: pointer;}#dcsupportcontainer {&nbsp; background-color: #f5f5f5;&nbsp; padding-top: 10px;&nbsp; color: #434343;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: space-evenly;&nbsp; align-items: center;&nbsp; /*height: calc(100% - 43px); */&nbsp; display: none;}.dcbutton {&nbsp; display: flex;&nbsp; text-align: center;&nbsp; background-color: #fff;&nbsp; border-radius: 10px;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 230px;&nbsp; height: 40px;}.dcthelabel {&nbsp; text-decoration: none;&nbsp; color: #434343;&nbsp; text-transform: uppercase;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.nonsolid {&nbsp; background-color: #f5f5f5;&nbsp; border-color: #fff;&nbsp; border-style: solid;&nbsp; border-width: 3px;}#dcmessageus {&nbsp; text-transform: none;}#dcaslnow {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="dccontainer">&nbsp; <p id="dcsupporttab">Support</p>&nbsp; <div id="dcsupportcontainer">&nbsp; &nbsp; <div class="dcbutton" id="dcaslnow">&nbsp; &nbsp; &nbsp; <a href="#" class="dcthelabel">ASL Now</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dcbutton" id="dctextchat">&nbsp; &nbsp; &nbsp; <a href="#" class="dcthelabel">Text Chat</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dcbutton nonsolid" id="dcmessageus">&nbsp; &nbsp; &nbsp; <a href="#" class="dcthelabel">Send Us a Message</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <p id="dcvpinfo">Video Chat: [phone]</p>&nbsp; </div></div>