jQuery 单击切换事件，不知道如何在 div 上进行第一次单击，然后在除 div 之外的任何位置进行第二次单击？

Question

the attached code allows you to click on a div to bring it into "focus" like a modal dialogue box, which is what I wanted it to do.附加的代码允许您单击一个 div 使其像模态对话框一样进入“焦点”，这就是我想要它做的事情。 However, I don't want to have to click on the div a second time to "dismiss" it, instead I want to click anywhere outside of the div.但是，我不想再次单击 div 以“关闭”它，而是想单击 div 之外的任何位置。

I'm completely stumped at this point, and can't seem to find any good resources for it.在这一点上我完全被难住了，似乎找不到任何好的资源。 Any help would be greatly appreciated!任何帮助将不胜感激！

 $('[id^=TestDiv]').click(function(e) { $('#TestDiv' + this.id.match(/\d+$/)[0]).toggleClass('fullscreen'); $('#overlay').toggle(); });

 body { height: 100vh; width: 100vh; } #Container { margin: auto; padding: 0; display: grid; background-color: black; width: 100%; height: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "myDiv1 myDiv2" "myDiv3 myDiv4"; } div.fullscreen { position: absolute; z-index: 9999; width: 50%; height: 50%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #TestDiv1 { background: red; grid-area: myDiv1; } #TestDiv2 { background: green; grid-area: myDiv2; } #TestDiv3 { background: blue; grid-area: myDiv3; } #TestDiv4 { background: yellow; grid-area: myDiv4; } div[id^='TestDiv'] { display: flex; justify-content: flex-end; flex-direction: column; } span.text { float: left; margin-bottom: 2%; margin-left: 2%; font-size: 0.5em; } span.integer { float: right; margin-bottom: 2%; margin-right: 4%; font-size: 0.55em; font-weight: bold; } #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; }

 <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <div id="Container"> <div id="TestDiv1" class="top"> <div> <span class="text">text content </span> <span class="integer">1</span> </div> </div> <div id="TestDiv2" class="top"> <div> <span class="text">text content </span> <span class="integer">2</span> </div> </div> <div id="TestDiv3" class="bottom"> <div> <span class="text">text content </span> <span class="integer">3</span> </div> </div> <div id="TestDiv4" class="bottom"> <div> <span class="text">text content </span> <span class="integer">4</span> </div> </div> </div> <div id="overlay"></div> </body> </html>

Answer 1

You are using toggle class, the problem is that just use addClass, do the below code, it will work:您正在使用切换 class，问题是只使用 addClass，执行以下代码，它将起作用：

$('[id^=TestDiv]').click(function(e) {
    $('#TestDiv' + this.id.match(/\d+$/)[0]).addClass('fullscreen');
    $('#overlay').css("display","block");
});
$('#overlay').click(function () {
    $('[id^=TestDiv]').removeClass('fullscreen');
    $('#overlay').css("display","none");
});

 $('[id^=TestDiv]').click(function(e) { $('#TestDiv' + this.id.match(/\d+$/)[0]).addClass('fullscreen'); $('#overlay').css("display","block"); }); $('#overlay').click(function () { $('[id^=TestDiv]').removeClass('fullscreen'); $('#overlay').css("display","none"); });

 body { height: 100vh; width: 100vh; } #Container { margin: auto; padding: 0; display: grid; background-color: black; width: 100%; height: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "myDiv1 myDiv2" "myDiv3 myDiv4"; } div.fullscreen { position: absolute; z-index: 9999; width: 50%; height: 50%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } #TestDiv1 { background: red; grid-area: myDiv1; } #TestDiv2 { background: green; grid-area: myDiv2; } #TestDiv3 { background: blue; grid-area: myDiv3; } #TestDiv4 { background: yellow; grid-area: myDiv4; } div[id^='TestDiv'] { display: flex; justify-content: flex-end; flex-direction: column; } span.text { float: left; margin-bottom: 2%; margin-left: 2%; font-size: 0.5em; } span.integer { float: right; margin-bottom: 2%; margin-right: 4%; font-size: 0.55em; font-weight: bold; } #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; }

 <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <div id="Container"> <div id="TestDiv1" class="top"> <div> <span class="text">text content </span> <span class="integer">1</span> </div> </div> <div id="TestDiv2" class="top"> <div> <span class="text">text content </span> <span class="integer">2</span> </div> </div> <div id="TestDiv3" class="bottom"> <div> <span class="text">text content </span> <span class="integer">3</span> </div> </div> <div id="TestDiv4" class="bottom"> <div> <span class="text">text content </span> <span class="integer">4</span> </div> </div> </div> <div id="overlay"></div> </body> </html>

jQuery 单击切换事件，不知道如何在 div 上进行第一次单击，然后在除 div 之外的任何位置进行第二次单击？

问题描述

1 个解决方案

解决方案1
1 2020-07-03 04:44:27

jQuery 单击切换事件，不知道如何在 div 上进行第一次单击，然后在除 div 之外的任何位置进行第二次单击？

问题描述

1 个解决方案

解决方案1 1 2020-07-03 04:44:27

解决方案1
1 2020-07-03 04:44:27