Javascript Jquery将类添加到设备上的元素

我正在构建一个响应滑块，它将有两种不同的行为

一个用于桌面。 一个是移动电话

步骤如下：

• 检查设备模式是否处于活动状态，并添加classMobile
• 检查桌面模式是否处于活动状态，并添加类桌面

我在代码方面遇到的问题是：

• 如何在单击时将活动类添加到

• 如果单击“关闭btn”，如何将活动类删除到

//检查设备模式是否处于活动状态，并添加类Mobile
mobileViewUpdate（）；
$（窗口）。在（'load，resize'，mobileViewUpdate'）；
函数mobileViewUpdate（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<600）{
$（“.items”）.addClass（“移动”）；
$（“.mobile”）.removeClass（“桌面”）；
}否则{
$（“.items”）.addClass（“桌面”）；
$（“.mobile”）.removeClass（“mobile”）；
$（“.mobile”）.removeClass（“活动”）；
}
};
//现在，如果父级具有类Mobile，则将类active添加到li
$（“.mobile li”）。单击（功能（e）{
e、 防止违约；
//从所有类中删除类
if（！$（this.hasClass（“活动”））{
$（此）.addClass（“活动”）；
}
});
$（“.close btn”）。单击（函数（e）{
e、 防止违约；
$（this.find（'li.active'）.removeClass（'active'））
});
.items{
位置：固定；
最高：50%；
左：50%；
文本对齐：居中；
宽度：5000px；
-webkit转换：translateY（-50%）translateX（-50%）；
转化：translateY（-50%）translateX（-50%）；
}
.项目李{
位置：相对位置；
垂直对齐：中间对齐；
显示：内联块；
列表样式：无；
宽度：320px；
高度：320px；
/*背景色：rgba（228,0,59,1）*/
-webkit转换持续时间：.5s；
过渡时间：.5s；
溢出：隐藏；
光标：指针；
}
.项目li.bg img{
位置：绝对位置；
宽度：100%；
身高：100%；
背景尺寸：封面；
背景位置：中上；
}
.项目li>a{
颜色：白色；
文字装饰：无；
光标：指针；
宽度：100%；
身高：100%；
显示：块；
位置：相对位置；
z指数：2；
}
.项目li>a.内容{
/*背景：-webkit线性梯度（透明，rgba（228,0,59,0.75））；
背景：线性梯度（透明，rgba（228,0,59,0.75））*/
宽度：100%；
身高：100%；
位置：绝对位置；
底部：0；
左：50%；
-webkit转换：translateY（100%）translateX（-50%）；
转化：translateY（100%）translateX（-50%）；
-webkit转换持续时间：0.5s；
过渡时间：0.5s；
不透明度：0；
填充：10px 10px 10px 10px；
}
.项目li>a.内容h2{
字体大小：300；
颜色：白色；
字体大小：30px；
保证金：0；
填充：0；
文本对齐：居中；
}
/*使手机上的bg个性化*/
.手机{
边框：1px纯红；
}
.移动电话li.活动的a.内容{
-webkit转换：translateY（0）translateX（-50%）；
转化：translateY（0）translateX（-50%）；
不透明度：1；
}
.mobile li.content>span.close-btn{
位置：绝对位置；
顶部：10px；
右：-10px；
-webkit掩码：url(https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/close.svg)不重复；
掩码：url(https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/close.svg)不重复；
-webkit掩码大小：20px；
掩模尺寸：20px；
背景色：#fff；
光标：指针；
显示：块；
文本缩进：-9999em；
z指数：3；
}
/*使桌面上的bg个性化*/
.桌面{
边框：1px纯蓝色；
}
.desktop li.content>span.close-btn{
显示：无；
}
.桌面李：悬停{
-webkit转换延迟：.5s；
转换延迟：.5s；
宽度：计算（320px+40px）；
高度：计算（320px+40px）；
}
.desktop li:将鼠标悬停在a.内容上{
-webkit转换：translateY（0）translateX（-50%）；
转化：translateY（0）translateX（-50%）；
-webkit转换延迟：.75s；
转换延迟：.75s；
不透明度：1；
}



























它不起作用，因为

1.（这是可选的）我认为您的点击功能应该包含在
mobileViewUpdate
功能中

2.
close btn
是
的子项（在
中）。因此，当您单击它时，您也可以单击
li
以便同时删除和添加类

您应该检查（单击移动li时）您单击的元素是否为关闭btn，如果是，请取消单击。因此，当您单击
关闭btn
时，代码不会解释您也单击了li

3.在
关闭btn
中，单击您编写的函数
$（this）.find（'li.active'）.removeClass（'active'）
。find（）仅在元素内部搜索。在这种情况下，li是
close btn
的父项，但不是直接的父项，因此需要使用
parents（）
查找
li.active

请参阅下面的代码或JSFIDLE


//检查设备模式是否处于活动状态，并添加类Mobile
mobileViewUpdate（）；
$（窗口）。在（'load，resize'，mobileViewUpdate'）；
函数mobileViewUpdate（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<600）{
$（“.items”）.addClass（“移动”）；
$（“.mobile”）.removeClass（“桌面”）；
}否则{
$（“.items”）.addClass（“桌面”）；
$（“.mobile”）.removeClass（“mobile”）；
$（“.mobile”）.removeClass（“活动”）；
}
};
//现在，如果父级具有类Mobile，则将类active添加到li
$（“.mobile li”）。单击（功能（e）{
e、 防止违约；
//从所有类中删除类
如果（$（e.target）.is（'.close btn'））{
返回；
}
if（！$（this）.hasClass（“acti