求帮忙调整一下javascript代码,点击上下箭头切换的效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>Document</title><styl...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin:0;
padding:0;
}
.menu {
position: fixed;
bottom: 0;
left: 0;
height: auto;
text-align:center;
width: 100%;
cursor: pointer;
}
.title {
width: 100%;
height:40px;
background: orange;
text-align: center;
}
.dropdown {
width: 100%;
height: auto;
background:red;
max-height: 150px;
overflow: hidden;
transition: all .5s
}
.down {
max-height: 0;
}
ul {
padding:0;
margin:0;
list-style:none;
}
.triangle-top {
display: inline-block;
margin: 10px;
border-top: 2px solid; border-right: 2px solid;
width: 10px; height: 10px;
transform: rotate(-45deg);
}
.triangle-bottom {
display: inline-block;
margin: 10px;
border-bottom: 2px solid; border-right: 2px solid;
width: 10px; height: 10px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="menu">
<div class="dropdown">
<ul><li>aaa</li><li>bbb</li><li>ccc</li><ul>
</div>
<div class="title" onclick="f()">
<span class="triangle triangle-bottom"></span>
</div>
</div>
<script>
function f() {
document.getElementsByClassName('dropdown')[0].classList.toggle('down');
document.getElementsByClassName('triangle')[0].classList.toggle('triangle-top');
if (document.getElementsByClassName('triangle')[0].style="triangle-bottom") {
document.getElementsByClassName('triangle')[0].className="triangle-top";
} else {
document.getElementsByClassName('triangle')[0].className="triangle-bottom";
}
}
</script>
</body>
</html>
这是个利用改变DIV高度来实现伸缩菜单的效果,但是箭头按钮的JS代码部分错误,页面载入后箭头向下,点击后箭头向上,再次点击箭头就不变了,不知道怎么改让箭头随点击上下切换. 展开
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin:0;
padding:0;
}
.menu {
position: fixed;
bottom: 0;
left: 0;
height: auto;
text-align:center;
width: 100%;
cursor: pointer;
}
.title {
width: 100%;
height:40px;
background: orange;
text-align: center;
}
.dropdown {
width: 100%;
height: auto;
background:red;
max-height: 150px;
overflow: hidden;
transition: all .5s
}
.down {
max-height: 0;
}
ul {
padding:0;
margin:0;
list-style:none;
}
.triangle-top {
display: inline-block;
margin: 10px;
border-top: 2px solid; border-right: 2px solid;
width: 10px; height: 10px;
transform: rotate(-45deg);
}
.triangle-bottom {
display: inline-block;
margin: 10px;
border-bottom: 2px solid; border-right: 2px solid;
width: 10px; height: 10px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="menu">
<div class="dropdown">
<ul><li>aaa</li><li>bbb</li><li>ccc</li><ul>
</div>
<div class="title" onclick="f()">
<span class="triangle triangle-bottom"></span>
</div>
</div>
<script>
function f() {
document.getElementsByClassName('dropdown')[0].classList.toggle('down');
document.getElementsByClassName('triangle')[0].classList.toggle('triangle-top');
if (document.getElementsByClassName('triangle')[0].style="triangle-bottom") {
document.getElementsByClassName('triangle')[0].className="triangle-top";
} else {
document.getElementsByClassName('triangle')[0].className="triangle-bottom";
}
}
</script>
</body>
</html>
这是个利用改变DIV高度来实现伸缩菜单的效果,但是箭头按钮的JS代码部分错误,页面载入后箭头向下,点击后箭头向上,再次点击箭头就不变了,不知道怎么改让箭头随点击上下切换. 展开
展开全部
既然用了toggle，就试一下都用toggle吧，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin:0;
padding:0;
}
.menu {
position: fixed;
bottom: 0;
left: 0;
height: auto;
text-align:center;
width: 100%;
cursor: pointer;
}
.title {
width: 100%;
height:40px;
background: orange;
text-align: center;
}
.dropdown {
width: 100%;
height: auto;
background:red;
max-height: 150px;
overflow: hidden;
transition: all .5s
}
.down {
max-height: 0;
}
ul {
padding:0;
margin:0;
list-style:none;
}
.triangle-top {
display: inline-block;
margin: 10px;
border-top: 2px solid; border-right: 2px solid;
width: 10px; height: 10px;
transform: rotate(-45deg);
}
.triangle-bottom {
display: inline-block;
margin: 10px;
border-bottom: 2px solid; border-right: 2px solid;
width: 10px; height: 10px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="menu">
<div class="dropdown down">
<ul><li>aaa</li><li>bbb</li><li>ccc</li><ul>
</div>
<div class="title" onclick="f()">
<span class="triangle triangle-top"></span>
</div>
</div>
<script>
function f() {
document.getElementsByClassName('triangle')[0].classList.toggle('triangle-top');
document.getElementsByClassName('triangle')[0].classList.toggle('triangle-bottom');
document.getElementsByClassName('dropdown')[0].classList.toggle('down');
}
</script>
</body>
</html>
望采纳，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
