防止"display:flex"导致移动菜单在页面加载时打开？

Question

我想把移动菜单底部(桌面最右边(的元素添加到移动菜单列表的顶部。为此，我添加了以下CSS：

ul.et_mobile_menu {
display:flex;
flex-direction: column;
}
ul.et_mobile_menu li:last-child {
order: -1;
margin-bottom:5px;
}

这很成功，但(我相信是由于显示：flex(菜单在页面加载时开始显示为打开状态。我试着简单地隐藏它(直到用户点击打开(：

#mobile_menu, .et_mobile_menu{
display:none;
}

但这阻止了早期代码的工作。有人知道如何解决这个问题吗？下方的菜单代码

<div id="et_mobile_nav_menu"><div class="mobile_nav closed">
<span class="select_page">Select Page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span><ul id="mobile_menu" class="et_mobile_menu" style="display: none;"><li id="menu-item-131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-has-children menu-item-131 et_first_mobile_item"><a href="https://heriotbayinn.com/" aria-current="page">About</a><ul class="sub-menu">
<li id="menu-item-29232" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29232"><a href="/homepage/#history">History</a></li>
<li id="menu-item-26779" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26779"><a href="https://heriotbayinn.com/gallery/">Gallery</a></li>
<li id="menu-item-28534" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28534"><a href="https://heriotbayinn.com/educational-tourism/">Discover Quadra</a></li>
<li id="menu-item-27072" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27072"><a href="https://heriotbayinn.com/covid-update/">Covid-19 Update</a></li>
<li id="menu-item-29238" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29238"><a href="/homepage/#newsletter">Newsletter</a></li></ul>
</li>
<li id="menu-item-26496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26496"><a href="https://heriotbayinn.com/accommodations-heriot-bay/">Stay with Us</a><ul class="sub-menu">
<li id="menu-item-29261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29261"><a href="https://heriotbayinn.com/rooms-accommodation/">Rooms</a></li>
<li id="menu-item-29393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29393"><a href="https://heriotbayinn.com/cabins/">Cabins</a></li>
<li id="menu-item-29424" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29424"><a href="https://heriotbayinn.com/suite/">Suite</a></li>
<li id="menu-item-29448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29448"><a href="https://heriotbayinn.com/rent-whole-hotel/">Rent the Whole Hotel</a></li></ul>
</li>
<li id="menu-item-29497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29497"><a href="https://heriotbayinn.com/dining-at-heriot-bay-inn/">Dining</a><ul class="sub-menu">
<li id="menu-item-29498" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29498"><a href="https://heriotbayinn.com/dining-at-heriot-bay-inn/">Herons Restaurant</a></li>
<li id="menu-item-29515" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29515"><a href="https://heriotbayinn.com/hbi-pub-at-heriot-bay-inn/">HBI Pub</a></li></ul>
</li>
<li id="menu-item-31582" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31582"><a href="https://heriotbayinn.com/upcoming-events/">Events</a><ul class="sub-menu">
<li id="menu-item-232910" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232910"><a href="https://heriotbayinn.com/upcoming-events/">Upcoming Events</a></li>
<li id="menu-item-231975" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231975"><a href="https://heriotbayinn.com/past-events/">Past Events</a></li></ul>
</li>
<li id="menu-item-27658" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27658"><a href="https://heriotbayinn.com/marina-heriot-bay-inn/">Marina</a></li>
<li id="menu-item-29206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29206"><a href="https://heriotbayinn.com/campground/">Campground</a></li>
<li id="menu-item-29747" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29747"><a href="https://heriotbayinn.com/weddings/">Weddings</a><ul class="sub-menu">
<li id="menu-item-332203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-332203"><a href="https://heriotbayinn.com/weddings/">Weddings</a></li>
<li id="menu-item-29752" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29752"><a href="https://heriotbayinn.com/meetings-retreats/">Meetings &amp; Retreats</a></li></ul>
</li>
<li id="menu-item-231735" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231735"><a href="https://heriotbayinn.com/shop-hbi/">Shop</a></li>
<li id="menu-item-26550" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26550"><a href="https://heriotbayinn.com/contact/">Contact</a><ul class="sub-menu">
<li id="menu-item-28778" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28778"><a href="https://heriotbayinn.com/invest/">Invest</a></li></ul>
</li>
<li id="menu-item-29225" class="ds-custom-link menu-item menu-item-type-custom menu-item-object-custom menu-item-29225"><a href="https://onressystems.com/reservations/?property=heriot-bay-inn">Reserve Now</a></li></ul></div></div>

Answer 1

通过使用Javascript在元素之间移动而不是在flex显示器上进行CSS排序来解决。删除了CSS。

<script>
window.addEventListener("load", function () {
// do things after the DOM loads fully
var ul    = document.getElementById("mobile_menu");
var reserve = ul.children[ul.children.length - 1];
ul.removeChild(reserve);
ul.prepend(reserve);
reserve.classList.add("reserveSpacing");

});
</script>