不一致的jquery按钮单击行为答案

【问题标题】：Inconsistent jquery button click behaviour不一致的jquery按钮单击行为
【发布时间】：2015-11-02 11:36:40
【问题描述】：

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

问题：我在 div(outer) 中有一个 div(inner1)，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');
    });
});

A Fiddle of the above.

有人有什么想法吗？

【问题讨论】：

查看此链接：Parent and child div
感谢您的回复，但我认为这不是我想要的

标签： javascript jquery html css

【解决方案1】：

您需要明确地说 removeClass，因为 .toggle() 如果不存在则添加“show”，如果存在则删除“show”，在您总是希望从两个元素中删除显示类的地方，不能依赖它

这是你想做的事

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

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

Updated fiddle

【讨论】：

感谢您的回复，但您的小提琴仍然包含我的问题。在我使用切换的地方，它甚至不应该触摸基于我使用的选择器的内部>内部 div
@Srb1313711：检查更新的小提琴https://jsfiddle.net/wter4pr8/2/
哦，谢谢！我现在看到我的问题了！就是这样

【解决方案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');
    });
});

检查一下

【讨论】：