jQuery 隱藏元素 class 不會隱藏所有元素
[英]jQuery hide element by class doesn't hide all elements
問題描述
我有問題。 當我隱藏所有具有特定 class 的元素時，只有被點擊的元素被隱藏。 我不知道為什么會這樣。
如果我將彈出窗口放在頁面上的其他位置，它就可以工作。 我認為它必須與 css 有關，但我無法弄清楚是哪個屬性導致了這個問題。
代碼
$('.scroll-nav-item').click(function() { $(this).find('.popup').show(); }); $('.close-popup').click(function() { $('.popup').hide(); }); :root{ --nav-height: 5rem; --one-page-minus-nav-height: calc(100vh - var(--nav-height)); --scroll-nav-width: 80px; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-dark-hover: #606b76; } #scroll_nav{ overflow: visible; position: absolute; left: 0; top: calc(var(--nav-height) + 10rem); width: var(--scroll-nav-width); background-color: rgba(255, 255, 255, 0.5); }.scroll-nav-item{ display: flex; overflow: visible; justify-content: center; align-items: center; position: relative; color: var(--bg-light); --offset: 5px; width: calc(var(--scroll-nav-width) - calc(var(--offset) / 2)); height: calc(var(--scroll-nav-width) - var(--offset)); margin: calc(var(--offset) / 2) calc(var(--offset) / 2) calc(var(--offset) / 2) 0; border: 2px solid var(--bg-light); background-color: var(--bg-dark); cursor: pointer; }.popup{ position: absolute; left: var(--scroll-nav-width); cursor: auto; background-color: white; color: black; }.close-popup{ cursor: pointer; }.scroll-nav-item:hover{ background-color: var(--bg-dark-hover); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body style="background-color: #A3A3A3"> <:-- Scroll Navigation --> <div id="scroll_nav" class="d-none d-lg-block rounded-right" style=""> <div class="scroll-nav-item rounded"> open Popup <div class="popup" style="display; none: min-width: 600px"> Popin around <span class="close-popup"><b>close</b></span> </div> </div> <div class="scroll-nav-item rounded"> 2 </div> <div class="scroll-nav-item rounded"> 3 </div> <div class="scroll-nav-item rounded"> open popup <div id="pu1" class="popup" style="display;none: min-width: 600px"> popin around <span class="close-popup"><b>close</b></span> </div> </div> </div> <body>
如您所見，如果您打開兩個彈出窗口並嘗試關閉其中一個，則只有另一個彈出窗口被隱藏。
你能幫我理解我的代碼有什么問題嗎？
2 個解決方案
解決方案1
1 2020-05-02 20:42:41
當您單擊close時，處理程序將被執行，隱藏與您的選擇器匹配的所有元素。
處理程序完成后，事件在 DOM 中冒泡，到達.nav-item父項並觸發其處理程序，因為它畢竟是一個click事件，導致子彈出窗口再次顯示。
要解決此問題，您必須stop事件冒泡。
$('.close-popup').click(function(e) {
e.stopPropagation();
$('.popup').hide();
});
這將隱藏所有打開的彈出窗口。 如果您只想關閉單擊的彈出窗口，則必須修改關閉處理程序，以便限制該元素，類似於您對打開處理程序和.find()的操作，使用.parent()或.closest()功能。
$('.close-popup').click(function(e) {
e.stopPropagation();
$(this).parent('.popup').hide();
});
解決方案2
0 2020-05-02 20:39:43
當您將stopPropagation()添加到.close-popup元素的click()事件時，它會起作用：
$('.scroll-nav-item').click(function() { $(this).find('.popup').show(); }); $('.close-popup').click(function(e) { e.stopPropagation(); $(".popup").hide(); });
:root{ --nav-height: 5rem; --one-page-minus-nav-height: calc(100vh - var(--nav-height)); --scroll-nav-width: 80px; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-dark-hover: #606b76; } #scroll_nav{ overflow: visible; position: absolute; left: 0; top: calc(var(--nav-height) + 10rem); width: var(--scroll-nav-width); background-color: rgba(255, 255, 255, 0.5); }.scroll-nav-item{ display: flex; overflow: visible; justify-content: center; align-items: center; position: relative; color: var(--bg-light); --offset: 5px; width: calc(var(--scroll-nav-width) - calc(var(--offset) / 2)); height: calc(var(--scroll-nav-width) - var(--offset)); margin: calc(var(--offset) / 2) calc(var(--offset) / 2) calc(var(--offset) / 2) 0; border: 2px solid var(--bg-light); background-color: var(--bg-dark); cursor: pointer; }.popup{ position: absolute; left: var(--scroll-nav-width); cursor: auto; background-color: white; color: black; }.close-popup{ cursor: pointer; }.scroll-nav-item:hover{ background-color: var(--bg-dark-hover); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scroll_nav" class="d-none d-lg-block rounded-right" style=""> <div class="scroll-nav-item rounded"> open Popup <div class="popup" style="display: none; min-width: 600px"> Popin around <span class="close-popup"><b>close</b></span> </div> </div> <div class="scroll-nav-item rounded"> 2 </div> <div class="scroll-nav-item rounded"> 3 </div> <div class="scroll-nav-item rounded"> open popup <div id="pu1" class="popup" style="display:none; min-width: 600px"> popin around <span class="close-popup"><b>close</b></span> </div> </div> </div>
如果您只想關閉單擊.close-popup的彈出窗口，請將其調整為
$('.close-popup').click(function(e) {
e.stopPropagation();
$(this).parent('.popup').hide();
});
隱藏具有相同類的所有元素，然后添加具有相同類 Javascript 的元素
[英]Hide All Elements with Same Class Then Add An Element With Same Class Javascript
如果jquery slideToggle元素被切換，則隱藏所有其他元素
[英]If jquery slideToggle element is toggled then hide all other elements
在元素外部單擊以將其隱藏，不適用於多個元素
[英]Clicking outside of an element to hide it, doesn't work with multiple elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.