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

Question

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

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

这是片段:

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);
  }
});

#dccontainer {
  position: absolute;
  bottom: 0;
  width: 300px;
  left: 50%;
  height: 200px;
  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: (123) 456-7890</p>
  </div>
</div>

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

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

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

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

Answer 1

回答你的问题我哪里出错了:你在#dccontainer上指定了200px的固定高度。为容器指定固定高度会使 jQuery 的 slideToggle 变得无用。 jQuery 的 slideToggle 可以对给定元素的高度进行动画处理，在您的情况下，您可以对 #dcsupportcontainer 进行动画处理。即使您使用 slideToggle 将 #dcsupportcontainer 的高度设置为 0px，整个支撑 block 的高度仍将保持 200px。这会导致当#dcsupportcontainer消失时，整个 block 不会向下移动。当然，您可以手动计算新的 bottom 值并将其分配给 #dccontainer，但这确实很麻烦，而且非常不直观。

由于不想自己计算 bottom 值，因此我不会为 #dccontainer 设置高度，而只是保留其高度。它将根据其所有子项的要求设置其高度(默认值为auto)。此外，您没有使用fixed，而是使用了absolute。您应该在此处使用固定 block ，因为您希望支撑 block 始终可见(即使用户向下滚动)；这意味着您应该根据视口(viewport)而不是元素来定位它(阅读有关定位 here 的更多信息)。我还对您的 CSS 样式做了一些细微的调整，使其更加简洁。最后一件事，我建议您重新访问 flexbox here 和 here 以更好地利用它。

这是一个可行的解决方案:

// 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: (123) 456-7890</p>
  </div>
</div>