Question

我想在较小宽度的屏幕上做一些事但我有一个问题。我正在创建一个响应式导航栏，因此我希望在宽度较小的情况下显示一个按钮。切换菜单。但是当我以较小的宽度隐藏菜单时，由于隐藏在jQuery中，它没有显示更宽的菜单...

所以我想让jQuery代码以更小的宽度运行JUST，我写了这个但是它没有工作：

$(window).resize(function() {
    if($(window).width() < '48em') {
        $('.ji-toggle-btn').click(function() {
            $(this).parent().find('ul').toggle();
        });                 
    }
});

Answer 1

显示/隐藏按钮的正确方法是使用CSS中的媒体查询：

.css示例：

.ji-toggle-btn {
  display: none;
}    

@media (min-width: 48em) {
  .ji-toggle-btn {
    display: block;
  }
}

.scss示例：

.ji-toggle-btn {
  display: none;

  @media (min-width: 48em) {
    display: block;
  }
}

我嘲笑了如何做响应边栏的示例： http://codepen.io/staypuftman/pen/dGOMYO

在这个例子中你会注意到JS的使用方式。定位.toggle类并使用css转换可以让您到达目的地。你用JS来过度思考这种方法。

Answer 2

$（window）.width（）返回一个int（屏幕宽度，以像素为单位）。为了在ems中获得该值，您需要除以购买正文的字体大小，然后将其与“48”而不是“48em”进行比较。例如：

$(window).resize(function() {
    if(($(window).width() / parseFloat($("body").css("font-size"))) < 48) {
        //  Do stuff here...              
    }
});

Answer 3

您的问题是您在较小的分辨率上分配行为。实际上，您只想在窗口大小小于48 em时分配单击事件。

用简单的单词 - 只需删除点击事件：

$(window).resize(function() {
    if($(window).width() < '48em') {
        $('.ji-toggle-btn').parent().find('ul').toggle();
    }
});

编辑我同意上面关于CSS的人。这些事情基本上应该通过媒体查询完成。

如何以更小的宽度运行jQuery函数？

3 个答案: