不一致的jquery按钮单击行为

Question

我对jquery有点陌生，所以这可能很常见，但我无法在网上找到我需要的东西。

问题：我在div（外部）内有一个div（inner1），inner1 div一直隐藏，直到单击按钮为止。单击后，显示inner1 div并淡出背景。 在inner1内部，我有另一个具有类似功能的div（inner2）。 当inner1显示时，将显示一个按钮以显示inner2。 以上工作正常。 我的问题是，如果单击按钮以显示inner1，然后退出（隐藏）显示的div（inner1），然后再次按下按钮以显示它，则它现在同时显示两个内部divs（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');
    });
});

上面的小提琴。

有人有什么想法吗？

Answer 1

您需要明确地说出removeClass，因为.toggle（）如果不存在则添加“ show”，如果不存在则删除“ show”，因此不能一直依靠它，因为您总是想从两个元素中都删除show类。

这就是你想做的

$('.close-modal,.modalBackground').on('click', function () {
    $('.modalBackground').removeClass('show');
    $('.modalContent').removeClass('show');
});

编辑2：我没有检查您是否必须使用back作为关闭触发器更新提琴$('.close-modal,.modalBackground')

更新的小提琴

Answer 2

$(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');
    });
});

检查一下