javascript - 如何在导航菜单w3中添加过渡效果onclick
问题描述
我正在尝试在导航菜单上使用 javascript 进行平滑过渡(通过单击汉堡按钮在移动设备中响应)。基于W3的导航。链接在这里。但是,为什么我不能点击菜单,以及如何在点击时进行平滑过渡,使用新的 javascript 或只添加一些 css 来进行过渡?
这是我的代码,我刚刚从 w3 替换了 javascript。
//my javascript
$(document).ready(function(){
$(".icon").click(function(e) {
e.preventDefault();
var $div = $(this).next('.responsive');
$(".responsive").not($div).slideUp();
if ($div.is(":visible")) {
$div.slideUp();
} else {
$div.slideDown();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.topnav').length
if (!p) {
$(".responsive").slideUp();
}
});
});
//here is javascript by w3
// function myFunction() {
// var x = document.getElementById("myTopnav");
// if (x.className === "topnav") {
// x.className += " responsive";
// } else {
// x.className = "topnav";
// }
// }
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="function()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
解决方案
JS代码:-
$(document).ready(function(){
$(".icon").click(function(e) {
var $div = $(this).parent();
if ($div.hasClass('open')) {
$div.animate({height: "48px"}, undefined, undefined, function() { $(this).removeClass('open responsive') });
} else {
$div.animate({height: "236px"}, undefined, undefined, function() { $(this).css({'height': 'auto'}); });
$div.addClass('open responsive');
}
});
});
HTML:-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
CSS:-
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
/* display: none; */
height: 0px;
overflow: hidden;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
height: 0px;
overflow: hidden;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
height: 130px;
transition: 0.5s;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive { display: block; position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
笔记:-
- 最后必须使用
.animate()
而不是.slidUp()
和.slidDown()
as.slidUp()
will 会使元素隐藏,在这种情况下我们不希望这样做。 - 因为以这种方式解决它的一个缺点是,我们已经固定了以 px 为单位的打开和关闭状态的高度。
- 所以最好用 using 来完成
css
,在 JS 中我们只需添加那个css
类
推荐阅读
- c# - SqlKata:选择东西
- internationalization - 长文本翻译
- python - 使用 Psycopg2 游标和 Flask 批量显示 Postgresql 表中的大量记录
- python - Pandas:查找数据框中每一列的最大最小行数
- powerbi - 对一列求和的快速度量,按另一列分组,如果选择过滤器则不会更改 (DAX)
- java - 如何在 Spring Boot 应用程序中将 int Mongodb 类型转换为布尔值
- python - 如何将新字段添加到 drf 查询输出中?
- html - 滚动时div越过标题栏
- javascript - 在一个下拉列表中选择选项禁用另一个选项?
- c# - c# winforms多行文本框到mailto:body