求帮忙调整一下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代码部分错误,页面载入后箭头向下,点击后箭头向上,再次点击箭头就不变了,不知道怎么改让箭头随点击上下切换. 展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

百度网友75e0ae8
2018-05-10 · TA获得超过5537个赞

知道大有可为答主

回答量：2491

采纳率：91%

帮助的人：1412万

我也去答题访问个人页

关注

展开全部

既然用了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>

望采纳，谢谢

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求帮忙调整一下javascript代码,点击上下箭头切换的效果

其他类似问题

为你推荐：