javascript - jQuery - 显示/隐藏多个模式
问题描述
如何.modal
使用id
for each.button
和 a data-id
for each modal 打开?
如果其中一个.modal
是打开的并且我单击另一个.button
,我希望模式切换(打开的关闭,关闭的打开)。
$('.button').on('click', function() {
$('.modal').toggleClass('active');
});
$(document).on("click", function(e) {
if (($(".modal").hasClass("active")) && (!$(".modal, .modal *, .button").is(e.target))) {
$(".modal").toggleClass("active");
}
});
$(window).scroll(function() {
$('.modal').removeClass('active');
});
.button {
height: 30px;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" />
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal" data-id="apple">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
解决方案
您可以做的是更改data-id
为id
并以不同的方式调用它:
<div class="modal" id="googleModal">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal" id="appleModal">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
然后在您的脚本中获取图像的 id 并添加类:
$('.button').on('click', function() {
if($(this).attr('id') == 'google'){
$('#googleModal').toggleClass('active');
$('#appleModal').removeClass('active'); }
else if($(this).attr('id') == 'apple'){
$('#appleModal').toggleClass('active');
$('#googleModal').removeClass('active'); }
});
工作小提琴
推荐阅读
- categories - 用于选择的多个类别 UID(类别树)?
- python - Django 的 Manager 类中是否有 create() 方法?
- node.js - 如何使用 sinon 和 mocha 在 node js 中模拟可配置的中间件
- android - 在 VS Code 中在 Android 手机上运行 Flutter 应用
- clang++ - Emscripten EMSCRIPTEN_KEEPALIVE / EXPORTED_FUNCTIONS 来自除 main 之外的 hpp/cpp 文件
- html - 如何判断网页的哪个部分与特定的 React 组件相关联
- c# - 当阅读器关闭时,C# 尝试调用深度无效
- java - Spring Boot Hibernate 在第一次使用空数据库启动时抛出约束警告
- node.js - process.env.MONGODB_URI 是什么意思?
- angular - 打开菜单时如何聚焦输入元素?