[英]jQuery slideToggle not working, using display: none
In the following example, I try to open a dropdown menu using jQuery #slideToggle on an inner content pane div. 在以下示例中,我尝试在内部内容窗格div上使用jQuery #slideToggle打开一个下拉菜单。 Sliding is completely unresponsive for me, using Firefox. 使用Firefox,滑动对我完全没有反应。
I have tried copying just the responsive parts to a secondary file with no success. 我尝试仅将响应部分复制到辅助文件,但没有成功。
<!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>
The given code should open a submenu with a GitHub icon onclick. 给定的代码应打开一个带有GitHub图标onclick的子菜单。 The submenu actually is correctly layed out. 子菜单实际上已正确布置。
In below line of code, drawer-content-projects
is an id
- 在下面的代码行中, drawer-content-projects
是一个id
Change 更改
<div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>
to 至
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.