仅当特定 div 打开时才固定位置

Question

我想要一个只出现在移动菜单中的“关闭菜单图标 (X)”。我必须构建该元素并将其附加到移动菜单。

例子在这里： https://josh-unger-4lts.squarespace.com/

（还没有关闭元素的功能）

我追加：

<script>
$(document).ready(function(){
 $('#block-yui_3_17_2_3_1513615238211_6445').appendTo('#mobileNav ');
 });
 </script>

我希望我的关闭元素仅在移动导航打开时具有固定位置。

我的CSS为(X)定位：

 #block-yui_3_17_2_3_1513615238211_6445   {position: fixed; top: 0px; 
   right: 18px;
   margin-top: -5px;

}

我正在寻找一种解决方案，让这个结束 (x) 元素仅在移动菜单打开时出现，而不是一直出现。

Answer 1

您的模板中已经有一个样式，表示移动导航是否打开 (.menu-open)。只需相应地使用该样式的关闭按钮即可：

#mobileNav.menu-open #block-yui_3_17_2_3_1513615238211_6445 {
    position: fixed;
    top: 0px; 
    right: 18px;
    margin-top: -5px;
}