既然用了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>
望采纳,谢谢
<html><head>
<script>
function moveUp()
{
document.getElementById("btnDown").disabled = false
img = document.getElementById("img1")
img.style.top = parseInt(img.style.top,10)-30
if(parseInt(img.style.top,10)<0)
{
img.style.top = 0
event.srcElement.disabled = true
}
}
function moveDown()
{
document.getElementById("btnUp").disabled = false
img = document.getElementById("img1")
img.style.top = parseInt(img.style.top,10)+30
if((parseInt(img.style.top,10)+img.height)>document.body.clientHeight)
{
img.style.top = document.body.clientHeight - img.height
event.srcElement.disabled = true
}
}
</script>
</head>
<body>
<img id="img1" style="position:absolutetop:100pxleft:100px" src="http://img.baidu.com/img/iknow/avarta/66/r8s1g7.gif" />
<input id="btnUp" type="button" value="↑" onclick="moveUp()" />
<input id="btnDown" type="button" value="↓" onclick="moveDown()" />
</body>
</html>