1

我正在为一个项目使用波旁威士忌笔芯的滑动菜单，只是希望它一直运行到特定的断点。我认为下面的这种方法会起作用。

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>

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

4

0 回答 0