在下面的示例中，我尝试在内部内容 Pane div 上使用 jQuery #slideToggle 打开下拉菜单。使用 Firefox 时，滑动对我来说完全没有反应。
我曾尝试仅将响应部分复制到辅助文件，但没有成功。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.drawer {
width: 100px;
justify-content: center;
background: #00274f;
border: 1px solid #001937;
border-radius: 20px;
padding: 10px;
}
.drawer-head {
justify-content: center;
background: #00274f;
border: 1px solid #001937;
border-radius: 20px;
padding: 10px;
cursor: pointer;
}
.drawer-content {
display: none;
width: 99px;
justify-content: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="drawer" id="drawer-projects">
<div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>
<div class="drawer-content" id="drawer-content-projects">
<img class="icon" src="img/socialmedia/github.png" alt="GitHub"
title="GitHub" onclick="select('github')">
<!-- code was cut from the main site -->
</div>
</div>
</body>
</html>
给定的代码应该打开一个带有 GitHub 图标 onclick 的子菜单。子菜单的布局实际上是正确的。
最佳答案
在下面的代码行中，drawer-content-projects 是一个 id -
改变
<div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>
到
<div class="drawer-head" onclick="$('#drawer-content-projects').slideToggle('slow');">Projects</div>
.drawer {
width: 100px;
justify-content: center;
background: #00274f;
border: 1px solid #001937;
border-radius: 20px;
padding: 10px;
}
.drawer-head {
justify-content: center;
background: #00274f;
border: 1px solid #001937;
border-radius: 20px;
padding: 10px;
cursor: pointer;
}
.drawer-content {
display: none;
width: 99px;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drawer" id="drawer-projects">
<div class="drawer-head" onclick="$('#drawer-content-projects').slideToggle('slow');">Projects</div>
<div class="drawer-content" id="drawer-content-projects">
<img class="icon" src="img/socialmedia/github.png" alt="GitHub"
title="GitHub" onclick="select('github')">
<!-- code was cut from the main site -->
</div>
</div>
关于javascript - jQuery slideToggle 不工作，使用显示 : none，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55344183/