如何使用 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() {

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

    //execute this after slideToggle is done

  });

});

#dccontainer {

  position: absolute;

  bottom: 0px;

  width: 300px;

  left: 50%;

  margin-left: -150px;

  transition: .5s;

  overflow: hidden;

}

#dccontainer * {

  margin-top: 0;

  margin-bottom: 0;

  padding-top: 0;

  padding-bottom: 0;

  font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';

  font-weight: bold;

  /* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */

}

#dcsupporttab {

  background-color: #f5f5f5;

  color: #434343;

  text-align: center;

  width: 150px;

  padding: 10px;

  padding-bottom: 3px;

  margin: auto;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  cursor: pointer;

}

#dcsupportcontainer {

  background-color: #f5f5f5;

  padding-top: 10px;

  color: #434343;

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

  align-items: center;

  /*height: calc(100% - 43px); */

  display: none;

}

.dcbutton {

  display: flex;

  text-align: center;

  background-color: #fff;

  border-radius: 10px;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 230px;

  height: 40px;

}

.dcthelabel {

  text-decoration: none;

  color: #434343;

  text-transform: uppercase;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

.nonsolid {

  background-color: #f5f5f5;

  border-color: #fff;

  border-style: solid;

  border-width: 3px;

}

#dcmessageus {

  text-transform: none;

}

#dcaslnow {

  display: none;

}

<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>