Question

我对jQuery有点新，我正在使用Bootstrap和Jasny Off Canvas。我想在900px以上的所有设备上使用Bootstraps导航栏和在900px以下的所有设备上使用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的每一行类型。

我希望这是有道理的，请问是否它没有。

Answer 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进行任何修改。

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

1 个答案: