我对jquery有点新意,所以这可能很常见,但我无法在网上找到我需要的内容。
问题: 我在div(外部)内部有一个div(inner1),内部div被隐藏,直到单击一个按钮,单击时显示inner1 div并淡出背景。在inner1中,我有另一个具有类似功能的div(inner2)。当inner1显示时,显示一个按钮以显示inner2。以上工作正常。我的问题是,如果我单击按钮显示inner1,然后退出(隐藏)显示的div(inner1)然后按下按钮再次显示它现在显示两个内部div(inner1,inner2)。这有意义吗?我不知道为什么会这样。
守则:
HTML:
<div class="documentlist">
<div class="modalBackground"></div>
<div class="modalContent"> <a href="#" class="close-modal">x</a>
Text1
<input type="button" id="btnsm1" value="t1" />
<div class="documentdetails">
<div class="modalBackground"></div>
<div class="modalContent"> <a href="#" class="close-modal">x</a> Text2</div>
</div>
</div>
</div>
<input type="button" id="btnsm" value="t" />
Jquery的:
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
});
有没有人有任何想法?
答案 0 :(得分:1)
你需要明确地说removeClass,因为.toggle()如果不存在则添加'show'并删除'show'(如果存在),不能依赖于close,你总是希望从两个元素中删除show类
这是你想要做的事情
$('.close-modal,.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
编辑2:我没有检查你是否必须使用返回作为近距触发更新小提琴$('.close-modal,.modalBackground')
答案 1 :(得分:1)
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
});
检查