Javascript 带条件的removeClass

如果您

单击

任一图像，则会为每个图像显示一个唯一的

模式

我使用了一个函数，如果你不点击，它会隐藏苹果模式

如果单击任何

.alt btn

，如何保持apple模式显示

$(document).on("click", function(e) {
  if (
    $(".apple-modal").hasClass("active") &&
    !$(".modal, .modal *, .button").is(e.target)
  ) {
    $(".modal").removeClass("active");
  }
});

$（“[数据关闭]”）。单击（函数（e）{
const dataClose=$（this.attr（“数据关闭”）；
常量元素=$（'[data id=“'+dataClose+'“]'）。长度？
$（“[data id=“”+dataClose+“]”]）：
$（数据关闭）；
如果（元素类（“活动”）和元素是（“可见”））{
元素移除类（“活动”）；
e、 停止即时复制（）；
}
});
$（“.button”）。在（“单击”，函数（）{
const id=$（this.prop（“id”）；
$（“.modal”）。每个（函数（）{
$（this）.toggleClass（“active”，$（this）.data（“id”）==id）；
});
});
$（文档）。在（“单击”）上，函数（e）{
如果(
$（“.apple modal”）.hasClass（“活动”）&&
！$（“.modal、.modal*、.button”）.is（e.target）
) {
$（“.modal”）.removeClass（“活动”）；
}
});
。按钮{
高度：30px；
光标：指针
}
.标题{
高度：15px；
背景：#eee；
}
.莫代尔{
位置：固定；
顶部：72px；
右：15px；
z指数：6；
不透明度：0；
可见性：隐藏；
变换：比例（0.5）；
变换原点：右上角；
过渡时间：0.15s；
盒影：0 1.5px 4px rgba（0,0,0,0.24），0 1.5px 6px rgba（0,0,0,0.12）；
}
.莫代尔：之后{
内容：“；
宽度：15px；
高度：15px；
背景：继承；
位置：绝对位置；
背景：#eee；
顶部：-6px；
右：8px；
不透明度：0；
可见性：隐藏；
变换：旋转（45度）比例（0.5）；
过渡时间：0.15s；
}
.modal.active{
不透明度：1；
能见度：可见；
变换：比例（1）；
}
.modal.active:之后{
不透明度：1；
能见度：可见；
变换：旋转（45度）比例（1）；
}

谷歌


首先

第二

第三

苹果


首先

第二

第三

开门
保持打开状态
您只需在此处添加“.alt btn”：

if ($(".apple-modal").hasClass("active") &&
    !$(".modal, .modal *, .button, .alt-btn").is(e.target))
{
    if(!$(".apple-modal").hasClass("keep-active"))
        $(".modal").removeClass("active");
} 

下面是一个工作示例：


$（“[数据关闭]”）。单击（函数（e）{
const dataClose=$（this.attr（“数据关闭”）；
常量元素=$（'[data id=“'+dataClose+'“]'）。长度？
$（“[data id=“”+dataClose+“]”]）：
$（数据关闭）；
如果（元素类（“活动”）和元素是（“可见”））{
元素移除类（“活动”）；
e、 停止即时复制（）；
}
});
$（“.button”）。在（“单击”，函数（）{
const id=$（this.prop（“id”）；
$（“.modal”）。每个（函数（）{
$（this）.toggleClass（“active”，$（this）.data（“id”）==id）；
});
});
$（文档）。在（“单击”）上，函数（e）{
如果(
$（“.apple modal”）.hasClass（“活动”）&&
！$（“.modal、.modal*、.button、.alt btn”）.is（e.target）
) {
$（“.modal”）.removeClass（“活动”）；
}
});
。按钮{
高度：30px；
光标：指针
}
.标题{
高度：15px；
背景：#eee；
}
.莫代尔{
位置：固定；
顶部：72px；
右：15px；
z指数：6；
不透明度：0；
可见性：隐藏；
变换：比例（0.5）；
变换原点：右上角；
过渡时间：0.15s；
盒影：0 1.5px 4px rgba（0,0,0,0.24），0 1.5px 6px rgba（0,0,0,0.12）；
}
.莫代尔：之后{
内容：“；
宽度：15px；
高度：15px；
背景：继承；
位置：绝对位置；
背景：#eee；
顶部：-6px；
右：8px；
不透明度：0；
可见性：隐藏；
变换：旋转（45度）比例（0.5）；
过渡时间：0.15s；
}
.modal.active{
不透明度：1；
能见度：可见；
变换：比例（1）；
}
.modal.active:之后{
不透明度：1；
能见度：可见；
变换：旋转（45度）比例（1）；
}

谷歌


首先

第二

第三

苹果


首先

第二

第三

开门
保持打开状态