jQuery 單擊切換事件，不知道如何在 div 上進行第一次單擊，然后在除 div 之外的任何位置進行第二次單擊？
[英]jQuery click toggle event, can't figure out how to have the first click on the div and second click anywhere EXCEPT the div?
問題描述
附加的代碼允許您單擊一個 div 使其像模態對話框一樣進入“焦點”，這就是我想要它做的事情。 但是，我不想再次單擊 div 以“關閉”它，而是想單擊 div 之外的任何位置。
在這一點上我完全被難住了，似乎找不到任何好的資源。 任何幫助將不勝感激！
$('[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>
1 個解決方案
解決方案1
1 2020-07-03 04:44:27
您正在使用切換 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
[英]Expand div on first click and fade out div on second click with jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.