Javascript toggling element's display not working
I've done this dozens of times, but for some reason I can't figure out why the #dropdown-list div isn't displaying when the #dropdown-button is clicked...
<html>
<head>
<script type="text/javascript">
function toggleDropdown(optionalArg){
optionalArg = (typeof optionalArg == "undefined")?'defaultValue':optionalArg
ele = document.getElementById("dropdown-list");
//If optionalArg is 0 we want to hide it
if(optionalArg == 0){
ele.style.display=='none'
}
//If optionalArg is 1 we want to show it
else if(optionalArg == 1){
ele.style.display=='block';
}
//If optionalArg is NULL we want to toggle it's display
else{
if(ele.style.display=='none')
ele.style.display=='block';
else
开发者_开发问答 ele.style.display=='none';
}
}
</script>
<style type="text/css">
#dropdown-container{
width:200px;
border:1px solid black;
overflow: hidden;
}
#dropdown-text {
width:176px;
float:left;
}
#dropdown-button {
text-align:center;
width:20px;
border:2px outset black;
float:left;
}
#dropdown-button:active {
border:2px inset black;
}
#dropdown-list {
display:none;
width:200px;
max-height:250px;
background-color:#b0c4de;
border:1px solid #cccccc;
overflow:auto;
}
</style>
</head>
<body>
<div id="dropdown-container">
<div id="dropdown-label">
<input id="dropdown-text" type="text" />
<div id="dropdown-button" onclick="toggleDropdown();">V</div>
</div>
<div id="dropdown-list">
<ul class="dropdown-ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
Should be really simple, but I think it's just late and I'm having issues with this simple bit of JS. Thanks for taking a look at it!
You use the equality operator (==) instead of assignment (=):
if(ele.style.display=='none')
ele.style.display=='block';
else
ele.style.display=='none';
should be
if(ele.style.display=='none')
ele.style.display='block';
else
ele.style.display='none';
加载中,请稍侯......
精彩评论