Question

所以在我的脚本中我正在努力我有很多种选择，用户可以设置VIA变量。现在我的一个变量是cfs_responsive，如果条件检查true / false或1/2值以及是否设置了实际变量，我有一个JavaScript。现在，我被困在这里。一旦我正确地写了条件，我应该如何打开和关闭响应式css代码？

我的响应式css代码如下。

/* ===RESPONSIVE=== */
    /* CSS DIRECTORY
        1. =primaryCATEGORY
        2. =subCATEGORY
        3. =lowerCONTENT
    */
    @media all and (max-width: 1000px) {
        /* ===primaryCATEGORY=== */
            /* Single Primary Category Divider */
            .cfs_primaryCategory {
                margin-left: 0px;
                position: absolute;
            }
            .cfs_primaryCategory h1 {
                visibility: hidden;
            }
            .cfs_primaryCategory.cfs_primaryCategory-active h1 {
                visibility: visible;
            }
            .cfs_primaryCategory.cfs_primaryCategory-active {position: relative;z-index: 999;}
        /* ===subCATEGORY=== */
            /* Single Sub Category Divider */
            .cfs_subCategory {
                margin-left: 0px;
                position: absolute;
            }
            .cfs_subCategory.cfs_subCategory-active {position: relative;z-index: 999;}
        /* ===lowerCONTENT=== */
            /* Lower Content Wrapper */
            .cfs_lowerContent-wrapper {
                padding: 25px 35px 0px 35px;
                max-width: 450px;
            }
    }

这样做的唯一方法是将样式表分成两个不同的样式表，然后在if语句中使用js包括样式表是否为真？

我真的想把样式表放在一起。

让我知道你的想法。

提前非常感谢！

Answer 1

您希望将其保留为单独的样式表并在页面中添加/删除它是合理的。

我能想到的唯一另一个选择是在正文或另一个父元素上添加/删除一个类，例如<body class="responsive">并在CSS中使用它：

body.responsive .cfs_primaryCategory {...}

JQ

$('body').toggleClass('responsive');
// or $('body').addClass('responsive');
// and $('body').removeClass('responsive');

切换响应式CSS代码

1 个答案: