基于视口宽度在 Bootstrap Navbar 和 Jasny Off Canvas 之间弹跳答案

【问题标题】：Bouncing between Bootstrap Navbar and Jasny Off Canvas based on viewport width基于视口宽度在 Bootstrap Navbar 和 Jasny Off Canvas 之间弹跳
【发布时间】：2015-01-05 03:40:04
【问题描述】：

我对 jQuery 有点陌生，正在使用 Bootstrap 和 Jasny Off Canvas。我想在超过 900 像素的所有设备上的 Bootstraps 导航栏和适用于所有 900 像素以下设备的 Jasny 的画布菜单之间滑动。

为此，我使用以下方法：

 <script>   
        $(window).bind("load resize", function() {
            var width = $(window).width();
            if (width <= 900) {
                $('.nav-selector').removeClass('navbar navbar-default');
                $('.menu-items').removeClass('collapse navbar-collapse');
                $('.nav-items-selector').removeClass('nav navbar-nav');
                $('.nav-selector').addClass('navmenu navmenu-default navmenu-fixed-left');
                $('.nav-items-selector').addClass('nav navmenu-nav');
            }
            else {
                $('.nav-selector').removeClass('navmenu navmenu-default navmenu-fixed-left');
                $('.nav-items-selector').removeClass('nav navmenu-nav');
                $('.nav-selector').addClass('navbar navbar-default');
                $('.menu-items').addClass('collapse navbar-collapse');
                $('.nav-items-selector').addClass('nav navbar-nav');
            }
        });         
    </script>

这行得通，但对于我自己的学习，是否有一种更雄辩的方式可以在导航类型之间进行切换，而无需使用 2 个完全不同的导航（在不同的媒体查询中隐藏和可见）或不必为两个导航自定义每一行 CSS类型。

我希望这是有道理的，如果没有，请询问。

【问题讨论】：

标签： jquery twitter-bootstrap jasny-bootstrap

【解决方案1】：

您可以将整个导航定义为一个字符串，并根据大小将其插入为 html。

var width = $(window).width();
var nav1 = '<div>a very long string</div>';
var nav2 = '<div>an equally long string</div>';
if (width <= 900) {
  $('#navContainer').html( $(nav1) );
} else {
  $('#navContainer').html( $(nav1) );
}

您可以通过为每个导航添加唯一的 id 并检查它们是否已经存在来优化这一点，这样您就不会无缘无故地修改 DOM。

【讨论】：