如何在执行移动端菜单Javascript时隐藏生成的选择框？

可以实现，以下是三种简单的处理方式，既能保证JS正常执行（避免显示桌面端菜单），又能隐藏生成的选择框和提示：

方法一：创建选择框时直接隐藏 #

原代码里创建<select>的语句存在语法错误（少了一个.），先修复这个问题，再给选择框添加隐藏样式：

把这一行：

$("<select />")appendTo("nav");

改成：

$("<select style='display: none;' />").appendTo("nav");

生成的选择框从一开始就会被隐藏，同时JS的其他逻辑正常执行，桌面端菜单会被原有机制（比如CSS媒体查询）隐藏，对应位置就会显示空白区域。

方法二：在JS代码末尾添加隐藏语句 #

如果不想修改创建逻辑，也可以在整个jQuery代码块的最后，添加一行隐藏选择框的代码：

修改后的完整代码：

jQuery.noConflict()(function($) {
  $("<select />").appendTo("nav"); // 修复语法错误
  $("<option />", {
    "selected": "selected",
    "value": "",
    "text": "Please choose page"
  }).appendTo("nav select");
  $("nav a").each(function() {
    var el = $(this);
    var perfix = '';
    switch (el.parents().length) {
      case (11):
        perfix = '';
        break;
      case (13):
        perfix = '-- ';
        break;
      default:
        perfix = '';
        break;
    }
    $("<option />", {
      "value": el.attr("href"),
      "text": perfix + el.text()
    }).appendTo("nav select");
    $("nav select").change(function() {
      window.location = $(this).find("option:selected").val();
    });
  });
  // 新增：隐藏生成的选择框
  $("nav select").hide();
});

function bookmarksite(title, url) {
  if (window.sidebar)
    window.sidebar.addPanel(title, url, "");
  else if (window.opera && window.print) {
    var elem = document.createElement('a');
    elem.setAttribute('href', url);
    elem.setAttribute('title', title);
    elem.setAttribute('rel', 'sidebar');
    elem.click();
  } else if (document.all)
    window.external.AddFavorite(url, title);
}

方法三：用CSS隐藏（无需修改JS） #

如果你的网站是通过CSS媒体查询控制菜单显示的，也可以直接在手机端的媒体查询规则里添加：

@media (max-width: 768px) { /* 宽度值根据你的手机端断点调整 */
  nav select {
    display: none;
  }
}

这种方式不需要改动JS代码，直接通过CSS隐藏手机端的选择框，同样能达到需求。

内容的提问来源于stack exchange，提问作者overhauler