2017-01-30 3 views
-6

Im total neu zu Javascript und ich fiel so verloren. Hab ein wenig HTMl/CSS aber kein JS gemacht. Kann mir jemand sagen, was ich in JS tun muss, damit mein Code funktioniert? :)Dropdown-Menü auf Javascript

<html> 
<head> 
<meta charset="utf-8"> 
<title>Uppgift 2</title> 
<script type="text/javascript" src="menu.js"></script> 
<link rel="stylesheet" type="text/css" href="menu.css"> 
</head> 

<body> 
<ul class="nav"> 
    <li class="button-dropdown"> 
     <a href="javascript:void(0)" class="dropdown-toggle"> 
      Mandagens Lunch <span>#</span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="#"> 
        Carbonara 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        Pizza 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        Köttbullar Med Mos 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul> 
</body> 
</html> 
+6

Aus irgendeinem Grund s, wir sind nicht in der Lage, Bilder zu debuggen ... –

+0

Bitte geben Sie Ihren Code als Code ... wenn Sie es hier für "einige Gründe" tun können, tun Sie es hier: http://codepen.io/ –

Antwort

1

Hier habe ich etwas von Grund auf neu .. ist nicht schön, aber es funktioniert.

JS:

var dropdownHidden = true; 
function toggleDropdown(){ 
    if(dropdownHidden){ 
    document.getElementById('dropdown-menu').style.display = ''; 
    dropdownHidden = false; 
    } else { 
    document.getElementById('dropdown-menu').style.display = 'none'; 
    dropdownHidden = true; 
    } 
} 

HTML:

<body> 
<ul class="nav"> 
    <li class="button-dropdown"> 
     <a href="#" class="dropdown-toggle" onClick="toggleDropdown()"> 
      Mandagens Lunch <span>#</span> 
     </a> 
     <ul id="dropdown-menu" class="dropdown-menu" style="display: none"> 
      <li> 
       <a href="#"> 
        Carbonara 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        Pizza 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        Köttbullar Med Mos 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul> 
</body> 

Codepen: http://codepen.io/anon/pen/xgpdYO

Hinweis: Dies ist ein "Sie jede Code-Lösung bereitgestellt havn't"