Question

我正在为项目使用bourbon refill's滑动菜单，只是希望它在特定断点之前运行。我认为下面的方法可行。

CSS：

 @media only screen and (max-width: 959px) {
  //sliding menu code
 }

奇怪的是，这可以在浏览器向外扩展时起作用。但是，当折叠时，会有一个闪光灯，并且在到达断点之前，菜单会在一两秒内变为可见。我应该将导航中的js-menu和sliding-menu-content类设置为display:none吗？

更新我在js中添加了一个条件来显式隐藏显示的类...... 但是当它高于960px时，这会从我的页面中删除导航。这也是使用js / jQuery控制视口的正确方法吗？

    var slidingElements = $('nav.js-menu.sliding-menu-content.is-visible, .sliding-menu-content');
    $(window).resize(function() {
        if ($(this).width() >= 959) {
            $(slidingElements).hide();
        } else {
            $(slidingElements).show();
        }
    });

有谁知道

JS：

<script>
$(document).ready(function() {

    $('.js-menu-trigger').on('click touchstart', function(e) {
        $('.js-menu').toggleClass('is-visible');
        $('.js-menu-screen').toggleClass('is-visible');
        e.preventDefault();
    });

    $('.js-menu-screen').on('click touchstart', function(e) {
        $('.js-menu').toggleClass('is-visible');
        $('.js-menu-screen').toggleClass('is-visible');
        e.preventDefault();
    });
});
</script>

我知道breakpoints和其他控制器（respond.js等）。这是解决这个问题的正确方法吗？

使用js / jQuery防止波旁威士忌/重新填充滑动菜单在特定断点处运行

0 个答案: