當快速模糊時，JavaScript下拉菜單閃爍

我創建了一個JavaScript下拉菜單，但在Safari和Chrome中快速模糊時，它會以閃爍的方式閃爍。這在Firefox中不是問題。當快速模糊時，JavaScript下拉菜單閃爍

我已經看到關於這個問題的帖子討論父/子問題或懸停的麻煩，但我不知道他們適用。我是JavaScript新手，這是我寫過的第一個代碼，所以我沒有真正理解這些回覆。

這是一個水平的菜單，每個欄有HTML這樣的...

<li> 
<a href="#" id="dropMenu3" class="dropMenu" onclick="dropDown3()">Creations</a> 
    <div id="dropDiv3" class="dropDiv bar3" onmouseout="hideDiv3()"> 
    <a href="#">Creations</a> 
    <a href="#">Cordie-bot</a> 
    <a href="#">Infinity Clock</a> 
    <a href="#">Steampunk Hat</a> 
    <a href="#">Birdfeeder</a> 
    </div> 
</li>

和JavaScript這樣的...

function dropDown3() { 
    document.getElementById("dropDiv1").classList.remove("show"); 
    document.getElementById("dropDiv2").classList.remove("show"); 
    document.getElementById("dropDiv3").classList.toggle("show"); 
    document.getElementById("dropDiv4").classList.remove("show"); 
    document.getElementById("dropDiv5").classList.remove("show"); 
} 
function hideDiv3(){ 
    document.getElementById("dropDiv3").classList.toggle("show"); 
}

每個div都在它的菜單欄的頂部時，它的以便鼠標懸停在頂部也可以工作，但在設置之前我也有閃爍的問題。

我確定有很多更好的方法來編碼，但我認爲它沒有什麼大錯。除了閃爍之外，它工作得很好。所以請讓我知道是否有辦法解決它。請保持簡單。我是新手。另外，我不使用jQuery。

來源

2017-06-21 sarahB

是否有你不使用CSS的原因？ – Baruch

我用了大量的CSS來設計這個網站。我沒有把它列入這篇文章，因爲我認爲它不相關。你是否說有一種方法可以用CSS創建下拉菜單？如果是這樣的話，出於某種原因更可取？我會很有興趣知道如何做，但我想用JavaScript來解決這個問題。我目前的目標是學習JavaScript。 – sarahB

要回答您的意見中的問題。如果你正在建立一個懸停的下拉式菜單，它最好是用CSS來完成，因爲它與舊版瀏覽器有更好的兼容性，而且它非常簡單，與使用JavaScript來嘗試使用它會導致像你一樣的煩惱正在得到。

這裏只有CSS建立了一個簡單的下拉菜單

HTML

<ul> 
    <li class="dropdown"> 
    Dropdown 
    <ul class="dropdown-menu"> 
     <li>Sub dropdown</li> 
     <li>Sub dropdown</li> 
     <li>Sub dropdown</li> 
     <li>Sub dropdown</li> 
     <li>Sub dropdown</li> 
    </ul> 
    </li> 
</ul>

SCSS

.dropdown { 
    &:hover { 
    .dropdown-menu { 
     display: block 
    } 
    } 
    &-menu { 
    display: none 
    } 
}

小提琴：link

來源

2017-06-23 02:35:32 Baruch

這是通過@jaimerump [鏈接]解決（https://stackoverflow.com/questions/11567110/drop-down-menu-flickering-except-in-firefox） – sarahB

對於我的其他JavaScript新手：

要回答我自己的問題，擺脫閃爍閃爍的最簡單方法是不使用JavaScript。簡單的解決方案是使用CSS，並將鼠標懸停在菜單上時打開菜單。在CSS下拉菜單下的w3schools中有一個例子。 Baruch提供的答案實際上使用了不僅僅是CSS的SCSS，而且可能不是提供新開發Web開發人員的最佳範例。

但是，如果您確實希望通過鼠標單擊打開下拉菜單，則通常的方法是使用JavaScript。再次，在Clickable Dropdown下的w3school中有一個例子。這是我開始的，但由於他們的例子只顯示一個下拉菜單，並且我想要多個菜單，所以我做了一些更改。這可能是我結束閃爍問題的原因。

現在，jaimerump的確找到了一種方法來修復我在之前的評論中鏈接到的閃爍，但代碼使用jQuery，它本身不是JavaScript，它實際上是一個外部JavaScript中的JavaScript代碼庫文件。所以如果你想使用這個代碼，你需要將你的頁面鏈接到jQuery。

我會弄清楚如何最終使用JavaScript解決這個問題，但現在我正在採取簡單的方法，使用CSS和懸停。

來源

2017-06-24 19:08:57 sarahB

當快速模糊時，JavaScript下拉菜單閃爍

回答

相關問題