Question

我有点像脚本的新手，但一直在尝试找到适合我的响应式菜单解决方案的解决方案。我见过有类似问题的其他人，但他们似乎在使用不同的菜单方法。

这是我的代码：

HTML：

＆＃13;

function toggle_visibility(id) {
  var e = document.getElementById('menu-items');
  if ($(e).css('display') == 'block') {
    $(e).slideUp('fast');
  } else {
    $(e).slideDown('fast');
  }
};

＆＃13;

.mobile-menu {
  display: none
}

@media only screen and (max-width: 680px) {
  #menu-items {
    display: none
  }
  .mobile-menu {
    display: block;
    cursor: pointer;
  }
}

＆＃13;

<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>	

<div id="menu-items">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>

</div>
<!--#menu-items-->

＆＃13;

菜单效果很好但我遇到的主要问题是当用户缩小窗口大小以显示响应式菜单切换时，然后使用切换打开然后关闭菜单，菜单永远不会返回到普通视图当窗口调整为桌面视图时。

奇怪的是，如果用户在移动视图中打开响应式菜单并将其重新调整回桌面，它会返回，但如果用户关闭菜单则不会返回。

我喜欢在此菜单上工作的另一件事是，如果用户点击页面中的任何其他位置但菜单，菜单将关闭。用户必须单击“菜单”切换链接才能将其关闭。

任何帮助都会非常感激!!!

非常感谢。

Answer 1

试试这个：

@media only screen and (min-width: 680px) {


 #menu-items {
    display: block
  }
  .mobile-menu {
    display: none;
    cursor: pointer;
  }

}

Answer 2

使用slideUp（）和slideDown（）这里有点棘手，因为他们设置/删除了内联样式＆quot; display：none;＆＃39;调整窗口大小时不会删除。这就是为什么菜单不再出现的原因：隐藏菜单的内联样式仍处于活动状态。

您需要做的是使用类来处理不同设备宽度的显示，并为slideUp的完整回调添加钩子：（JSFiddle）

CSS：

function toggle_collapsed_class(e) {
    $(e).css('display', '').addClass('collapsed');
};

function toggle_visibility(id) {
    var e = document.getElementById('menu-items');
    if ($(e).css('display') == 'block') {
        $(e).slideUp('fast', function(){
            toggle_collapsed_class(e)
        });
    } else {
        $(e).removeClass('collapsed').slideDown('fast');
    }
};

JS：

function callAjax(appDetails) {
                            appDetailsJsonString = JSON.stringify(appDetails);
                            $.ajax({
                             url: 'Upload.php',
                              type: 'POST',
                              data: {appDetailsJson: appDetailsJsonString},
                              dataType: 'json',
                             success:function(data) {
                                    console.log(data);
                               },
                             error:function(jqXHR, textStatus, errorThrown) {
                                console.log('request failed ' + textStatus + errorThrown);

                                console.log(appDetails);
                             }
                            });
                        }

响应式菜单消失在窗口调整大小

2 个答案: