我对jQuery有点陌生,正在使用Bootstrap和Jasny Off Canvas。我想在所有超过 900 像素的设备上的引导导航栏和 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。
我希望这是有道理的,如果不是,请问。
您可以将整个导航定义为字符串,并根据大小将其作为 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。