0
我用flexbox創建了一個簡單觸發器的響應式菜單，但遇到了問題。在其中一個媒體查詢中，我將UL降到div以下，其中包含logo和trigger，並更改它的display:none，直到點擊觸發器。響應式Flex菜單
當我試圖將UL設置爲打開狀態時，當我給它添加邊距和填充時，它增加了nav的整體大小，因此您可以指出隱藏的內容。由於元素是隱藏的，在觸發打開狀態之前，邊界和填充不應該有效嗎？
我發現通過添加邊距和填充到LI工作，但我覺得這是一個騙子。
$(function() {
\t
\t $('.trigger').click(function() {
\t \t $('.mainNav').toggleClass('show');
\t });
\t
\t
});* {
\t margin: 0;
\t padding: 0;
\t list-style-type: none;
}
body {
\t font-size: 17px;
\t color: white;
}
nav {
\t height: 100%;
\t width: 100%;
\t background-color: #333;
}
.nav-fixedWidth {
\t height: inherit;
\t min-height: 70px;
\t width: 960px;
\t margin: 0 auto;
\t display: flex;
\t flex-flow: row;
}
.logo-and-trigger {
\t display: flex;
\t justify-content: space-between;
}
.logo {
\t content: '';
\t height: 50px;
\t width: 50px;
\t background-color: #f1f1f1;
\t position: relative;
\t margin: 8px 0;
}
.trigger {
\t content: '';
\t height: 50px;
\t width: 50px;
\t background-color: #f1f1f1;
\t display: none;
\t position: relative;
\t margin: 8px 0;
}
.mainNav{
\t display: flex;
\t width: 200px;
\t justify-content: space-between;
\t margin: 20px 0px;
\t margin-left: auto;
\t overflow: hidden;
\t transition:max-height .3s ease;
}
@media screen and (max-width: 960px) {
\t
\t .nav-fixedWidth {
\t \t width: 100vw;
\t }
}
@media screen and (max-width: 900px) {
\t
\t .nav-fixedWidth {
\t \t flex-flow: column; \t
\t }
\t
\t .mainNav {
\t \t margin:0;
\t \t width: 100%;
\t \t display: block;
\t \t max-height: 0;
\t }
\t
\t .mainNav li {
\t \t margin: 20px;
\t \t padding: 20px;
\t \t margin-left: 0;
\t \t width: 100%;
\t \t padding-left: 0;
\t }
\t
\t .show {
\t \t max-height: 20em;
\t }
\t
\t .trigger {
\t \t display: flex;
\t }
\t
\t
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
\t <div class="nav-fixedWidth">
\t \t <div class="logo-and-trigger">
\t \t \t <div class="logo"></div>
\t \t \t <div class="trigger"></div>
\t \t </div>
\t \t <ul class="mainNav">
\t \t \t <li>Link 1</li>
\t \t \t <li>Link 2</li>
\t \t \t <li>Link 3</li>
\t \t </ul>
\t </div>
</nav>
_「由於元素被隱藏」_ - 不是，您只是給它一個最大高度爲0. – CBroe