Question

我正在使用twitter bootstrap CSS制作菜单。对于移动版本，我想为文本添加一些图标。我想在768px的断点处（当出现汉堡包图标时）这样做。

菜单html

if(jQuery("body").prop("clientWidth") > 768){
    jQuery("#contactLink").html('<a href="/contact"><i class="fa fa-envelope fa-lg"></i></a>');
}

的Javascript

{{1}}

但宽度不是bootstrap CSS中使用的实际宽度。我想在汉堡包图标出现时更改它。我也尝试了窗口/主体的innerWidth（搜索网后的解决方案）..没有什么工作..

我现在正试图获得＆＃34;州＆＃34;的菜单。但到目前为止，我无法找到变化......

有没有办法（在JS / JQuery中）获取菜单的状态？或者一种解决宽度的方法（不添加额外的html ......）？

Answer 1

如果你可以在CSS中使用媒体查询这可能是最好的方法，但如果你不能通过这样做来设置文本而不是图标，你可以尝试一下JS中的这些行：

if ( $(window).width() < 739) {      
  //code to set the html to text
} 
else {
  //code with icon
}

Answer 2

尝试将您的jquery逻辑转换为媒体查询（下面给出剪切只是一个示例，您需要根据需要替换它们），

@media (max-width: 768px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

然后试试。

Navbar响应式菜单

2 个答案: