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

JavaScript013

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

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