Dropdown的，dropbtn的和顯示問題

好吧，所以我最近纔開始涉足下拉列表和按鈕等，我設法讓3個列表從固定位置導航欄運行。我所做的每個列表都成功了，但從來沒有同時以同樣的方式，在這個問題的關鍵點上，我有第一個和最後一個列表以我想要的方式工作，但第二個列表儘管具有相同的腳本（除了id之外）並不像其他兩個那樣顯示。任何幫助解決我的問題，將不勝感激。Dropdown的，dropbtn的和顯示問題

（謹記，功能3是LIST NO.2問題）（使用Dreamweaver CC 2017）

function myFunction1() { 
 
    document.getElementById("myFruit").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(e) { 
 
    if (!e.target.matches('dropbtn')) { 
 
    var myDropdown = 
 
     document.getElementById("myFruit"); 
 
    if (myDropdown.classList.contains('show')) { 
 
     myDropdown.classList.remove('show'); 
 
    } 
 
    } 
 
} 
 

 
function myFunction2() { 
 
    document.getElementById("myScripts").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(e) { 
 
    if (!e.target.matches('dropbtn')) { 
 
    var myDropdown = 
 
     document.getElementById("myScripts"); 
 
    if (myDropdown.classList.contains('show')) { 
 
     myDropdown.classList.remove('show'); 
 
    } 
 
    } 
 
} 
 

 
function myFunction3() { 
 
    document.getElementById("posters").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(e) { 
 
    if (!e.target.matches('dropbtn')) { 
 
    var myDropdown = 
 
     document.getElementById("posters"); 
 
    if (myDropdown.classList.contains('show')) { 
 
     myDropdown.classList.remove('show'); 
 
    } 
 
    } 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" type="text/css" href="css/assignment.css" media="screen" /> 
 
     <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
     <div class="navigation"> 
 
      <div class="dropdown"> 
 
       <div class="dropbtn" onclick="myFunction1()"> 
 
        <h4>Task 1</h4> 
 
       </div> 
 
       <div class="dropdown-content" id="myFruit"> 
 
        <a href="#" target="_self">DragonFruit</a> 
 
        <a href="#" target="_self">Apricot</a> 
 
        <a href="#" target="_self">Lemon</a> 
 
       </div> 
 
      </div> 
 
      <div class="dropdown"> 
 
       <div class="dropbtn" onclick="myFunction3()"> 
 
        <h4>Task 2</h4> 
 
       </div> 
 
       <div class="dropdown-content" id="posters"> 
 
        <a href="#" target="_self">banana</a> 
 
        <a href="#" target="_self">apple</a> 
 
        <a href="#" target="_self">pear</a> 
 
        <a href="#" target="_self">orange</a> 
 
        <a href="#" target="_self">strawberry</a> 
 
        <a href="#" target="_self">Grape</a> 
 
        <a href="#" target="_self">peach</a> 
 
        <a href="#" target="_self">lime</a> 
 
       </div> 
 
      </div> 
 
      <div class="dropdown"> 
 
       <div class="dropbtn" onclick="myFunction2()"> 
 
        <h4>Task3</h4> 
 
        <div class="dropdown-content" id="myScripts"> 
 
        <a href="#" target="_self">little</a> 
 
        <a href="#" target="_self">men</a> 
 
        <a href="#" target="_self">dont</a> 
 
        <a href="#" target="_self">worry</a> 
 
        <a href="#" target="_self">about</a> 
 
        <a href="#" target="_self">what</a> 
 
        <a href="#" target="_self">the</a> 
 
        <a href="#" target="_self">links</a> 
 
        <a href="#" target="_self">display</a> 
 
        <a href="#" target="_self">am</a> 
 
        <a href="#" target="_self">I</a> 
 
        <a href="#" target="_self">Right</a> 
 
        <a href="#" target="_self">there</a> 
 
        <a href="#" target="_self">boys?</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-08-31 B.Silver

您可以將圖片展示在他們的視覺區別？ –

@anu sure https://imgur.com/a/4VcxM與這個URL有關的不同視圖和程序的3個圖像（我意識到如果沒有CSS，上面的代碼不會做很多） –

所以呃，我有幫助固定它從情侶朋友。而不是使用腳本來啓用懸停或點擊和鏈接顯示，我被髮送了一個html/css組合，我從朋友css複製了一段代碼。

.dropdown:hover .dropdown-content { 
display: block;

}

並刪除所有的功能和id的等它的工作，因爲我原本打算以後。 我不能相信這是如此簡單修復，

捂臉

來源

2017-09-03 09:36:28

Dropdown的，dropbtn的和顯示問題

回答

相關問題