如何將包含靈活高度菜單的選項卡固定在窗口底部並使用 jQuery 在單擊時向上滑動？

Question

我根據互聯網上的研究嘗試自己編碼。 我能夠把它固定在底部。 單擊時，它確實滑出菜單； 但是當它應該向上推動選項卡以顯示菜單時它向下滑出。 如果我使用負邊距並簡單地將bottom: -150更改為bottom: 0px單擊時為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); } });

 #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 animation 和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為給定元素的高度slideToggle動畫，在您的情況下，您正在為#dcsupportcontainer動畫。 即使您使用slideToggle將#dcsupportcontainer的高度動畫#dcsupportcontainer 0px，整個支撐塊仍將保持 200px 的高度。 這會導致當#dcsupportcontainer消失時，整個塊不會向下移動。 當然，您可以手動計算新的bottom值並將其分配給#dccontainer ，但這確實很麻煩且非常不直觀。

不想自己計算bottom值，我不會將高度設置為#dccontainer而只是讓它的高度成為。 它將其高度設置為其所有子項的要求（默認值為auto ）。 此外，您沒有使用fixed ，而是使用absolute 。 您應該在此處使用fixed ，因為您希望支持塊始終可見（即使用戶向下滾動）； 這意味着您應該根據您的視口而不是元素來定位它（ 在此處閱讀有關定位的更多信息）。 我還對您的 CSS 樣式進行了細微調整，使其更加簡潔。 最后一件事，我建議你在這里和這里重新訪問 flexbox 以更好地利用它。

這是一個有效的解決方案：

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

Answer 2

只需從主容器#dccontainer 取固定高度，一切都會好起來的。 您還應該刪除幾行 javascript 代碼以修復所有內容。 dccontainer 的固定高度使整個導航從頁面底部向上站立 200 像素，這使您可以使用更多的 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: (123) 456-7890</p> </div> </div>