1。引言

Question

1。引言

我使用Bootstrap 3编写我的第一个网站。我使用的是Html，Css和JavaScript。

2。问题

我做了一个汉堡包菜单，只能在超小的移动网格中显示（ 1-768px ）。菜单在这个额外的小网格中完美运行。但是，当我放大浏览器窗口时，汉堡包菜单会在小网格中显示（ 769-992px ）。

我试图摆弄我的Javascript并搜索答案，但没有成功。

Here is the visual representation of the problem!

3。我的代码

// iframe.controller.js
export default class iframeController {
    static $inject = ['$scope', '$element'];

    constructor($scope, $element) {
        // this display the iframe even that component have no template
        console.log($element.clone().wrap('<div/>').parent().html());
        $element.on('error', () => {
            console.log('error');
            var call = () => {
                this.onerror();
            }
            if (!$scope.$$phase) {
                $scope.$apply(call);
            } else {
                call();
            }
        });
    }
}

// iframe.component.js
import controller from './iframe.controller';

export default {
    bindings: {
        onerror: '&'
    },
    controller,
    controllerAs: 'vm'
};

Answer 1

内联样式（style =“display：block;”）仍然存在，所以#hamburgermenu {display：none;}没用。

有很多解决方案，最简单的方法是使用#hamburgermenu设置媒体查询{display：none！important;}

Answer 2

使用bootsrap时，您不必手动处理可见性问题。 Bootstrap有一些特殊的辅助类，可以将它们分配给html元素，以便在响应式应用程序中管理它们的可见性状态。

您可以在此处阅读：http://getbootstrap.com/css/

如何在小屏幕上管理可见的汉堡菜单图标以及在大屏幕上看不见的示例如下：

<button class="visible-xs hidden-sm hidden-md hidden-lg">My Button</button>

该按钮只能在小屏幕上显示。

修改的

为了处理菜单的可见性，我建议您在菜单中添加类而不是使用内联样式。

添加课程的优点是：您可以在样式表中轻松设置样式它不会覆盖此后的任何其他样式

添加课程的缺点是：你必须在css;）中创建一个类（不是con）

因此，我会将此方法用于click function

function toggle_visibility(id) {
  var e = document.getElementById('hamburgermenu');
  if(e.getAttribute('class') == 'my-class my-visible-class') 
      e.setAttribute('class', 'my-class')
  else
      e.setAttribute('class', 'my-class my-visible-class')
  }
} // you also missed this closing bracket

汉堡菜单可见网格大小

1。引言

2。问题

3。我的代码

2 个答案: