[JS初学者]我正在开发一个移动菜单，当你点击一个按钮时会触发它。
真正的问题是按钮不会以任何方式触发。
另一个问题是我希望，当菜单打开时，菜单的其余部分垂直向下滑动（移动）而不会干扰下拉菜单（子菜单）。
如果你想测试它，这是我的jsfiddle： https://jsfiddle.net/u1cbsaje/#&togetherjs=c6zR1o4b45
/* 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 menu 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');
}
}
}
}nav {
margin-top: 10px;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #133966;
}
nav li {
display:block;
}
nav li a,
.dropbtn {
display: block;
color: white;
text-align: left;
padding: 14px 0px 14px 50px;
text-decoration: none;
}
nav li a:hover,
.dropdown:hover .dropbtn {
background-color: #F04D0C;
}
li.dropdown {
display: block;
}
nav .dropdown-content {
display: none;
position: absolute;
background-color: #133966;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding-bottom: 10px;
z-index: 10;
}
nav .dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav .dropdown-content-side a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav .dropdown-content-side {
display: none;
position: absolute;
background-color: #133966;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
z-index: 10;
}
nav .dropdown-content .dropdown-content a:hover {
background-color: #f1f1f1
}
nav .dropdown-content .dropdown-content-side a:hover {
background-color: #f1f1f1
}<nav>
<ul>
<li><a href="index.php" class="cmn-t-underline">Acasa</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction() class="dropbtn" style="cursor:pointer">Infinatri firme</a>
<div id="myDropdown" class="dropdown-content">
<a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (S.R.L.) </a>
<a href="infintare_societate_limitata_d.php">Societate cu raspundere limitata - debutanti (S.R.L.-D)</a>
<a href="infintare_societate_actiuni.php">Societate pe actiuni (S.A.)</a>
<a href="infintare_persoana_fizica.php">Persoana fizica autorizata (P.F.A.)</a>
<a href="infintare_interprindere_individuala.php">Intreprindere individuala (I.I.)</a>
<a href="infintare_interprindere_familiala.php">Intreprindere familiala (I.F.)</a>
<a href="infintare_cooperative.php">Cooperative</a>
<a href="infintare_asociatii.php">Asociatii</a>
<a href="infintare_fundatii.php">Fundatii</a>
<a href="infintare_sindicate.php">Sindicate</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction() class="dropbtn" style="cursor:pointer">Modificari</a>
<div class="dropdown-content" id="myDropdown">
<a href="modificari_actualizare_date.php">Actualizare date de identificare</a>
<a href="modificari_deschiderepunct.php">Deschidere punct de lucru si autorizare activ</a>
<a href="modificari_inchiderepunct.php">Inchidere punct de lucru</a>
<a href="modificari_suspendare_reluare.php">Suspendare si reluare activitate</a>
<a href="modificari_majorare_capital.php">Majorare capital social</a>
<a href="modificari_reducere_capital.php">Reducere capital social</a>
<a href="modificari_numire.php">Numire administrator</a>
<a href="modificari_schimbare_revocare_admin.php">Revocare si schimbare administrator</a>
<a href="modificari_modif.php">Modificare obiect de activitate</a>
<a href="modificari_recod_extindere.php">Recodificare extindere obiect de activitate</a>
<a href="modificari_radiere.php">Radiere obiect de activitate</a>
<a href="modificari_schimbare_sediu.php">Schimbare sediu social</a>
<a href="modificari_prelungire_sediu.php">Prelungire sediu social</a>
<a href="modificari_autorizare_registru.php">Autorizare activitati registru comert</a>
<a href="modificari_schimbare_denumire.php">Schimbare denumire firma</a>
<a href="modificari_cesiune_firma.php">Cesiune firma</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction() class="dropbtn" style="cursor:pointer">Inchidere</a>
<div class="dropdown-content-side" id="myDropdown">
<a href="inchidere_pfa.php">Inchidere (P.F.A)</a>
<a href="inchidere_ii.php">Inchidere (I.I.)</a>
<a href="inchidere_if.php">Inchidere (I.F.)</a>
<a href="inchidere_srl.php">Inchidere (SRL - Radiere firma)</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction() class="dropbtn" style="cursor:pointer">Gazdurie</a>
<div class="dropdown-content-side" id="myDropdown">
<a href="gazduire_sect1.php">Gazduire sediu social sector 1</a>
<a href="gazduire_sect2.php">Gazduire sediu social sector 2</a>
<a href="gazduire_sect3.php">Gazduire sediu social sector 3</a>
<a href="gazduire_sect4.php">Gazduire sediu social sector 4</a>
<a href="gazduire_sect5.php">Gazduire sediu social sector 5</a>
<a href="gazduire_sect6.php">Gazduire sediu social sector 6</a>
</div>
</li>
<li><a href="modele.php" class="cmn-t-underline">Modele contracte</a></li>
<li><a href="tarife.php" class="cmn-t-underline">Tarife</a></li>
<li><a href="contact.php" class="cmn-t-underline">Contact</a></li>
</ul>
</nav>