我正在尝试创建一个简单的下拉菜单，但它什么也没做，我也不知道为什么。 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);
最佳答案
首先设置你的 div.nav内部 body 标签。
如果你在编码时犯了一些错误，比如:
<li style="margin: 5px; margin-left: 15px;"><a href="Index.html">Home</li>
这里你必须写</a>之前</li> .
或在这里:
</div class="lt">
这是错误的。在这里你必须添加 </div>并从顶行删除斜线。
关于javascript - HTML/CSS 不工作或 Javascript - 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28120990/