ドロップダウンメニューがすごく消えてしまうのはなぜですか？

Question

クリックするとすぐにドロップダウンメニューが消えます。このメニューが開いている時間を修正するにはどうすればよいですか？私はjavascript、css、htmlのスニペットを提供しています。あなたの時間をありがとう。ここで

はhtmlです：ここでは

<ul class="navbarWords" id="myNavbarWords"> 
      <li class="icon"> 
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
      </li> 
      <li><a href="daveContact.html">Contact</a></li> 
      <li><a href="daveCalendar.html">Calendar</a></li> 
      <li><a href="daveTestimonial.html">Testimonials</a></li> 
      <li><a href="daveTips.html">Tips</a></li> 
      <li class="dropdown"> 
       <a href onclick="myFunctions()" class="dropbtn">Gear</a> 
       <div id="myDropdown" class="dropdown-content"> 
        <a href="#">Link 1</a> 
        <a href="#">Link 2</a> 
        <a href="#">Link 3</a> 
       </div> 
      </li> 
      <li><a href="aboutDave.html">About</a></li> 
      <li><a href="daveCourses.html">Courses</a></li> 


     </ul> 
    </div> 

は、CSSです：ここでは

.navbar{ 
      width: 100%; 
      clear:both; 
      text-align: center; 
      background-color: white; 
      color: white; 
      height: 100px; 
      margin: 0px; 
      padding-top: 5px; 
      padding-bottom: 5px; 
      -webkit-box-shadow: 0px 3px 24px -9px rgba(0,0,0,1); 
      -moz-box-shadow: 0px 3px 24px -9px rgba(0,0,0,1); 
      box-shadow: 0px 3px 24px -9px rgba(0,0,0,1); 


     } 

     a{ 
      color:white; 

     } 

     ul.navbarWords{ 
      margin: 0; 
      padding: 0; 
      list-style-type: none; 
      z-index:10; 
      position:relative; 

    } 
    ul.navbarWords li { 
    float: right; 

    } 
    .navList.responsive{ 
    margin-top:70px; 

    background-color:grey;  
    } 


    ul.navbarWords li a { 
    text-align: center; 
    padding: 14px 16px; 
    margin-top:15px; 
    transition: 0.3s; 
    font-size: 17px; 
    display: inline-block; 
    color: black; 
    font-family: sans-serif; 
    text-decoration: none; 

} 

ul.navbarWords li a:hover { 
    background-color:#ccc; 
    color:#000; 
} 

    ul.navbarWords li.icon { 
    display: none; 


    } 


    @media screen and (max-width:840px) { 
    ul.navbarWords li{display: none;} 
    ul.navbarWords li.icon { 
    float: right; 
    display: inline-block; 
    right: 0; 
    top: 0; 
    margin:14px -130px 15px 15px; 
    } 
    } 
    @media screen and (max-width:840px) { 
    ul.navbarWords.responsive { 
    position: relative; 
    margin-top:80px; 
    background-color:grey; 
} 
ul.navbarWords.responsive li.icon { 
position:absolute; 
right: 0; 
top: 0; 
margin:-66px 4px 15px 15px; 
} 
} 
ul.navbarWords.responsive li { 
float: none; 
display: inline; 


} 
ul.navbarWords.responsive li a { 

    display: block; 
text-align: right; 
} 
.dropdown { 
position: relative; 
display: inline-block; 
} 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
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-content a:hover {background-color: #f1f1f1} 
.show {display:block;} 

はjavascriptのです：

function myFunctions() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 


window.onclick = function(e) { 
if (!e.target.matches('.dropbtn')) { 

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

Answer 1

次の2つのclickの機能の実行を持っています。
1.のの要素
2. window.onclick = function(e) {（文書のすべてのクリックを検出します）。

最初に、showクラスを要素に追加します。
2番目のクラス - showクラスが存在する場合は削除します。

あなたが望むものと実行するタイミングを決める必要があります。