如何使用每个 .button
的 id
和 data-id
打开 .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>
最佳答案
您可以将按钮 .prop('id')
的 id 与模态 .data('id')
的数据 id 进行比较并切换.active
类基于值的相等性。您可以通过使用 $(.modal).each
循环模式并利用 .toggleClass()
函数的状态参数来隐藏所有不显示的内容,从而准确地切换类'匹配按钮 ID 并显示匹配的那个。
您的示例代码似乎有两个问题:
- 单击 html 会在所有模式上切换
.active
类,因此我将其切换为removeClass
。 - 两个模态框都显示 Google,所以我将 apple 模态框切换为 Apple。
$('.button').on('click', function() {
const id = $(this).prop('id');
$('.modal').each(function() {
$(this).toggleClass('active', $(this).data('id') == id);
});
});
$(document).on("click", function(e) {
if (($(".modal").hasClass("active")) && (!$(".modal, .modal *, .button").is(e.target))) {
$(".modal").removeClass("active");
}
});
$(window).scroll(function() {
$('.modal').removeClass('active');
});
.button {
height: 30px;
cursor: pointer;
}
.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">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
关于javascript - jQuery - 显示/隐藏多个模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51832986/