我嘗試根據互聯網上的研究自己編寫代碼。我能夠把它固定在底部。點擊時，確實會滑出菜單；但當它應該向上推動選項卡以顯示菜單時，它卻向下滑出。如果我使用負邊距并簡單地更改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: (123) 456-7890</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
1 回答
皈依舞
TA貢獻1851條經驗 獲得超3個贊
回答你的問題我哪里出錯了：你在 上指定了 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: (123) 456-7890</p>
? </div>
</div>
HUH函數
TA貢獻1836條經驗 獲得超4個贊
只需從主容器 #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: (123) 456-7890</p>
</div>
</div>
- 1 回答
- 0 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消