隐藏和显示带有图标的移动菜单

Question

测试站点：https://josh-unger-mzr3.squarespace.com

我想在移动菜单（800 像素或更小）中添加 "x" 以关闭菜单。

我希望 "menu" 按钮在 "x" 被点击且没有冲突后重新打开菜单。

我的代码：

$(document).ready(function() {
  $('#block-yui_3_17_2_8_1513711317921_6208').appendTo('.wrapper ');
});

$(document).ready(function() {
  $("#block-yui_3_17_2_8_1513711317921_6208").click(function() {
    $("#mobileNav").toggleClass("menu-open")
  })
})

Answer 1

这是有效的解决方案。

<script> $(document).ready(function(){ $("#block-
 yui_3_17_2_8_1513711317921_6208").click(function()‌{ 
 $("#mobileNav").removeClass("menu-open"); }); }); </script>


 <script> $(document).ready(function(){ $("#block-
  yui_3_17_2_8_1513711317921_6208").click(function()‌{ 
   $("#mobileNav").height(0); }); }); </script>

隐藏和显示带有图标的移动菜单

hide and show mobile menu with icon

css

jquery

toggle