HTML - このスクリプトの仕組みを理解するのに役立ちます

ここではHTML初心者の初心者です。私は小さなプロジェクトのドロップダウンボタンを作成する方法を理解しようとしています。これはw3で見つけたドロップダウンボタンのコードです。HTML - このスクリプトの仕組みを理解するのに役立ちます

複数のドロップダウンボタンが必要です。 <div class="dropdown">をコピーした場合、いずれかのボタンをクリックすると、最初のドロップダウンボタンのみがトリガされます。

具体的に何がこれを引き起こしていますか、複数のボタンを作成する正しい方法は何ですか？私はあなたのコードを変更した

/* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
    function myFunction() { 
 
     document.getElementById("myDropdown").classList.toggle("show"); 
 
    } 
 
    
 
    // Close the dropdown if the user clicks outside of it 
 
    window.onclick = function(event) { 
 
     if (!event.target.matches('.dropbtn')) { 
 
    
 
     var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
     var i; 
 
     for (i = 0; i < dropdowns.length; i++) { 
 
      var openDropdown = dropdowns[i]; 
 
      if (openDropdown.classList.contains('show')) { 
 
      openDropdown.classList.remove('show'); 
 
      } 
 
     } 
 
     } 
 
    }

.dropbtn { 
 
     background-color: #4CAF50; 
 
     color: white; 
 
     padding: 16px; 
 
     font-size: 16px; 
 
     border: none; 
 
     cursor: pointer; 
 
    } 
 
    
 
    .dropbtn:hover, .dropbtn:focus { 
 
     background-color: #3e8e41; 
 
    } 
 
    
 
    .dropdown { 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    
 
    .dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: #f9f9f9; 
 
     min-width: 160px; 
 
     overflow: auto; 
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    } 
 
    
 
    .dropdown-content a { 
 
     color: black; 
 
     padding: 12px 16px; 
 
     text-decoration: none; 
 
     display: block; 
 
    } 
 
    
 
    .dropdown a:hover {background-color: #f1f1f1} 
 
    
 
    .show {display:block;} 
 
    </style> 
 
    </head>

<h2>Clickable Dropdown</h2> 
 
    <p>Click on the button to open the dropdown menu.</p> 
 
    
 
    <div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
     <div id="myDropdown" class="dropdown-content"> 
 
     <a href="#home">Home</a> 
 
     <a href="#about">About</a> 
 
     <a href="#contact">Contact</a> 
 
     </div> 
 
    </div>

出典

2016-10-20 A.Coustic

、これは何が必要でしょうか？

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     .dropbtn { 
     background-color: #4CAF50; 
     color: white; 
     padding: 16px; 
     font-size: 16px; 
     border: none; 
     cursor: pointer; 
    } 

    .dropbtn:hover, .dropbtn:focus { 
     background-color: #3e8e41; 
    } 

    .dropdown { 
     position: relative; 
     display: inline-block; 
    } 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: #f9f9f9; 
     min-width: 160px; 
     overflow: auto; 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    } 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown a:hover {background-color: #f1f1f1} 

.show {display:block;} 
</style> 
</head> 
<body> 

    <h2>Clickable Dropdown</h2> 
    <p>Click on the button to open the dropdown menu.</p> 

    <div class="dropdown"> 
    <button onclick="myFunction('myDropdown1')" class="dropbtn">Dropdown</button> 
    <div id="myDropdown1" class="dropdown-content"> 
    <a href="#home">Home</a> 
    <a href="#about">About</a> 
    <a href="#contact">Contact</a> 
    </div> 
</div> 
<div class="dropdown"> 
    <button onclick="myFunction('myDropdown2')" class="dropbtn">Dropdown 2</button> 
    <div id="myDropdown2" class="dropdown-content"> 
    <a href="#home">Home 2</a> 
    <a href="#about">About 2</a> 
    <a href="#contact">Contact 2</a> 
    </div> 
</div> 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction(id) { 
    document.getElementById(id).classList.toggle("show"); 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 

    for (i = 0; i < dropdowns.length; i++) { 
    var openDropdown = dropdowns[i]; 

    if (openDropdown.id !== id && openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
    } 
    } 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
    } 
    } 
    } 
} 
</script> 

</body> 
</html>

出典

2016-10-20 05:56:45

私がコピーした場合、いずれかのボタンをクリックすると、唯一の私は、あなたがコピーしていると思います、特にこの

をトリガさbutton.What最初のドロップダウンをトリガあなたの質問

に答えるためにdivのように、そう？
<div class="dropdown"> 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
    <div id="myDropdown" class="dropdown-content"> 
     <a href="#home">Home</a> 
     <a href="#about">About</a> 
     <a href="#contact">Contact</a> 
    </div> 
</div> 
このことは、その魔法に遭遇して行う#myDropdown
document.getElementById("myDropdown") 
の下に示したコードのMyFunctionを（）のスニペットは最初を選択しますので、効果的には、あなたのIDを複製しますクラスをトグルするので、最初のドロップダウンだけがトリガーされると感じます。

1つ以上のボタンを作成する適切な方法は何ですか？

実際には多くの方法がありますが、あなたは初心者であるため、私は安全にコピーの貼り付けがうまくいっていると言えるでしょう:)あなたがIDを繰り返さない限り。

しかし、コードの修正を実際に探しているなら、@Lahiruの答えがあなたをカバーするはずだと思います！

乾杯と幸せ学習

出典

2016-10-20 07:37:08 semuzaboi

HTML - このスクリプトの仕組みを理解するのに役立ちます

答えて

関連する問題