Menù a tendina JavaScript non funzionante

di
lore_majo
il
1 risposte
L
lore_majo
Pochi posts
Iscritto da
gen, 2018
Messaggi:
24

Menù a tendina JavaScript non funzionante

Buonasera!
Sono totalmente nuovo nel mondo di JavaScript, quindi solo per provare e per iniziare a capire qualcosa del linguaggio, oggi ho provato a mettere un semplice script (un dropdown menù) in un vecchio progetto che posso modificare senza problemi.

Ho inserito il codice js con le funzioni in un file separato, chiamandolo dal file HTML con <script src..>

La parte html del menu viene visualizzata correttamente, con tutti gli stili CSS in un altro file, ma se faccio clic sul pulsante, il menù non viene visualizzato.

Grazie in anticipo a tutti quelli che risponderanno. Buonaserata!!

Ricapitolando:

file.js -> funzioni del framework + inclusione jQuery
header.html -> parte html con chiamate delle funzioni di file.js (ho provato tutte le diverse combinazioni di inclusione (dentro/fuori dal body/ecc..)

file.js --> 

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

function dropMenu() {
    //document.getElementById("myDropdown").classList.toggle("show");
    alert(Ciao);
}

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

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

<html>
  <body>
    <div class="dropdown">
       <button onclick="dropMenu();" class="dropbtn">MENU</button>
         <div id="myDropdown" class="drop-content">
             <a href="#">Link 1</a>
             <a href="#">Link 2</a>
             <a href="#">Link 3</a>
         </div>
    </div>
(...) 

<script type="text/javascript" src="includes/frameworks/file.js"> 
   </script>
 </body>
</html>

1 Risposte

  • M
    martux
    Pochi posts
    Iscritto da
    ott, 2018
    Messaggi:
    6

    Re: Menù a tendina JavaScript non funzionante

    Ciao, ma perchè stai usando la versione vecchia di jquery e non l'ultima?
    e poi perchè se hai jquery usi js puro e non usi le funzioni e metodi di jquery?
    in ogni caso credo che tu debba usare .on()
    
$(function()
{
      // per maggiori dettagli vai sulla documentazione di jQuery on()
      $(document).on('click','#il-tuo-bottone-menu',function()
      {
          //con questo appare e scomapre il nav
          $("#il-tuo-nav-menu").slideToggle(600,'linear');
          
          // stuff code
      });
      
});
Devi accedere o registrarti per scrivere nel forum
1 risposte