用于调整 CSS 类填充的 jQuery 代码答案

【问题标题】：jQuery code to adapt a CSS class padding用于调整 CSS 类填充的 jQuery 代码
【发布时间】：2013-10-27 12:58:42
【问题描述】：

在我的网页Lemendu 上，我设置了两个 CSS 类“redback”和“greenback”，对应于我的顶部菜单部分“ESPAÑOL”和“FRANÇAIS”，将它们放在右侧。但是我对媒体查询有一个问题：在宽度 767px 下，两个 CSS 类与屏幕不匹配。我希望它们与我的顶部菜单的其他 CSS 类垂直排列（也就是说没有任何填充或边距）。我不能直接在我的媒体查询文件的每个屏幕大小中更改我的 CSS 类，因为那样的话，它将与 767 像素以下的屏幕不匹配。

我发现唯一的解决方案是直接在我的 jQuery 文件中调整我的两个 CSS 类，告诉他我不想要任何填充。（除非有人有任何 CSS 解决方案）。但我完全了解 jQuery 代码。

这是我的两个 CSS 类：

.redback {font-size:15px; color:#1b1c1e; padding:0px 10px 0px 120px; font-weight:400; width: 50px; position: relative; }
.greenback {font-size:15px; color:#1b1c1e; padding:0px 20px 0px 10px; font-weight:400; width: 50px; }

这是我的 jQuery 代码：

jQuery(document).ready(function(){


    jQuery('#nav-button').click(function() {
            jQuery('#options li').toggle();
    });

    if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();
    });
    }

    jQuery(window).resize(function() {
  if ( jQuery(window).width() < 767) {
    jQuery('#options li a').click(function() {
            jQuery('#options li').hide();

    jQuery(window).resize(function() {
  if ( jQuery(window).width() > 767) {
            jQuery('#options li').show();
            jQuery('#options li a').click(function() {
            jQuery('#options li').show();
    });
    }
    });

});

我提前感谢您的建议，感谢您提供任何帮助。

【问题讨论】：

您应该使用 CSS 媒体查询。您引用了它们，但实际上并没有在代码中使用它们。
这就是我需要帮助的原因，因为我不知道如何在我的 jQuery 文件中构建它，我对此完全陌生。

标签： jquery css class padding

【解决方案1】：

在您的 css 媒体查询中：

媒体=“全部” @media only screen and (max-width: 767px) .redback 和 .greenback 您需要删除将文本推到一边的填充。您只需要每种颜色样式即可。

【讨论】：