2013-12-24 47 views
0

所以在我的脚本我正在努力我有很多不同的选项,用户可以设置VIA变量。现在我的一个变量是cfs_responsive,并且我有一个JavaScript if条件检查true/false或1/2值以及是否设置了实际变量。现在我卡在这里。一旦我得到正确写入的条件,我该如何打开和关闭响应的css代码?切换响应式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的唯一方法包括:如果真样式表?

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

让我知道你在想什么。

巨大的感谢提前!

+0

的响应代码的特定部分是“接通和关断”,由屏幕的宽度。没有涉及JavaScript(或jQuery)。答案是改变浏览器的宽度。要么你误解了响应式CSS,要么我误解了这个问题。 – Popnoodles

+0

您误解了我...脚本中的选项允许打开或关闭响应模式。因此禁用脚本的响应部分。 –

+0

好的。您的想法将其保存为单独的样式表并将其从页面中添加/删除是有声的。我唯一能想到的另一个选择是在body上添加/删除一个类,即'>',并在CSS'body.responsive.cc_primaryCategory {...}'中使用它。 – Popnoodles

回答

0

你的点子,以保持它作为一个单独的样式表,并添加/从页面的声音中去除它。

我能想到的唯一的其他选择是添加/删除体上或另一个父元素,例如一个类<body class="responsive">和使用,在所述CSS:

body.responsive .cfs_primaryCategory {...} 

JQ

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