Question

我被要求更新我们网站上的左侧导航菜单whesearchreporting.com（如果您想访问该网站，可以输入用户名和密码的任何内容。网站仍在测试中模式）。目前，导航菜单在全宽屏幕上可见，但如果您将屏幕宽度减小到大约900像素，则菜单会消失，但可以通过左上角的菜单切换图标进行扩展。然而，他们现在想将这个逻辑更改为以下内容，我在解决如何解决问题时遇到了问题：

在全屏幕上，左上角没有可见的菜单切换按钮。菜单始终保持打开状态
在小屏幕或移动设备屏幕上，菜单切换按钮变为可见。

所以基本上，当屏幕尺寸缩小到950px左右时，我需要找到处理左导航菜单消失的代码。将相同的逻辑应用于左上方菜单切换图标。这是用bootstrap处理的吗？

如果有帮助，这里有一些代码可以处理我的导航菜单更小或更大（虽然我认为这与使菜单在较小的屏幕上消失有很大关系）：

$(function () {
  $('#sidebar-menu li ul').slideUp();
  $('#sidebar-menu li').removeClass('active');

  $('#sidebar-menu li').on('click touchstart', function() {
    var link = $('a', this).attr('href');

    if(link) { 
      window.location.href = link;
    } else {
      if ($(this).is('.active')) {
        $(this).removeClass('active');
        $('ul', this).slideUp();
      } else {
        $('#sidebar-menu li').removeClass('active');
        $('#sidebar-menu li ul').slideUp();

        $(this).addClass('active');
        $('ul', this).slideDown();
      }
    }
  });

  $('#menu_toggle').click(function () {
    if ($('body').hasClass('nav-md')) {
      $('body').removeClass('nav-md').addClass('nav-sm');
      $('.left_col').removeClass('scroll-view').removeAttr('style');
      $('.sidebar-footer').hide();

      if ($('#sidebar-menu li').hasClass('active')) {
        $('#sidebar-menu li.active').addClass('active-sm').removeClass('active');
      }
    } else {
      $('body').removeClass('nav-sm').addClass('nav-md');
      $('.sidebar-footer').show();

      if ($('#sidebar-menu li').hasClass('active-sm')) {
        $('#sidebar-menu li.active-sm').addClass('active').removeClass('active-sm');
      }
    }
  });   
});

这是代码部分的html：

<div class="nav toggle">
  <a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>

任何想法，我应该在哪里找到处理使该菜单在较小的屏幕上消失的代码？

由于

Answer 1

您应该在@media文件

中搜索Content/css/custom.css个查询

无法在较小的屏幕上找到隐藏左侧菜单的代码

1 个答案: