Question

我正在尝试创建一个简单的下拉菜单，但它没有做任何事情，我不知道为什么。 javascript应切换关闭的类：应隐藏语言类型并向上滑动其他选项卡（联系人）。当我点击按钮时，它什么都没做。类dp-click是您单击以切换菜单的内容。类dp-contents是在单击dp-click时应切换它们的可见性的语言。这是html。

<html>

    <head>
        <link href="Style.css" type="text/css" rel="stylesheet">
        <title>Enforcext</title>
    </head>

    <div class="nav">
        <div class="container">
            <img src="http://www.destinygamewiki.com/images/7/72/Enforcer_medal1.png" width="50px">
            <ul class="links">
                <li style="margin: 5px; margin-left: 15px;"><a href="Index.html">Home</li>
                <div class="lt">
                    <div class="dp-click">
                        <li style="margin: 5px; margin-left: 15px" class="dp-click"><a href="#" class="dp-click">Languages</a></li>
                    </div>
                </div>
            </ul>
            <div class="lt">
                <ul class="dp-contents links">
                    <li style="margin: 5px; margin-left: 25px"><a href="PHP.php">PHP</a></li>
                    <li style="margin: 5px; margin-left: 25px"><a href="HTML.html">HTML</a></li>
                    <li style="margin: 5px; margin-left: 25px"><a href="CSS.html">CSS</a></li>
                    <li style="margin: 5px; margin-left: 25px"><a href="Javascript.html">Javascript</a></li>
                </ul>
            </div class="lt">
            <ul class="links">
                <li style="margin: 5px; margin-left: 15px;"><a href="Contact.php">Contact</a></li>
            </ul>
        </div>
    </div>

    <body>


    </body>
    <script src="Javascript.js"></script>

</html>

CSS：

.nav {
  border: 1px black solid;
  background-image: url(Texture2.jpeg);
  width: 10%;
  height: 100%;
}
.links{
  display: inline;
  text-decoration: none;
}
.links a{
  text-decoration: none;
  display: inline;
  color: yellow;
}
.links a:hover{
  font-family: Impact;
}
.dp-contents{
  height: 0px;
  opacity: 0%;
  color: white;
}
.dp-show{
  color: purple;
  font-size: 20px;
}

JS：

var main = function(){
    $('.dp-click').click(function(){
        $('.dp-contents').toggle();
    });
}
$(document).ready(main);

Answer 1

首先在身体标签内设置div.nav。

Secend你在编码方面有一些错误：

<li style="margin: 5px; margin-left: 15px;"><a href="Index.html">Home</li>

您必须在</a>之前写下</li>。

或者在这里：

</div class="lt">

这是错误的。在这里，您必须添加</div>并从顶行删除斜杠。

Answer 2

确保在这种情况下链接外部库jQuery，因为您使用的是jQuery。

从您的代码中看来，您似乎没有链接它。

另外，请确保您的所有内容都包含在body标记中。

HTML / CSS无效或Javascript - 下拉菜单

2 个答案: