Question

我完全是Javascript的新手，我迷失了。做了一点HTMl / CSS但没有JS。 some1可以告诉我在JS中需要做什么来使我的代码工作吗？：）

<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>

Answer 1

在这里，我从零开始构建一些东西......不是美丽的，但它有效。

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

注意：这是“你没有提供任何代码解决方案”

Javascript上的下拉菜单

1 个答案: