2011-04-02 63 views
0

我已经做了几十次,但由于某种原因,我不明白为什么#下拉列表div不会显示#下拉按钮被点击时...Javascript切换元素的显示不工作

<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> 

应该是很简单,但我认为这只是晚,我在与JS的这个简单的问题位。感谢您看看它!

+0

你为什么不使用jQuery? – lam3r4370 2011-04-02 12:41:53

回答

6

您使用等于运算符(==),而不是分配(=):

 if(ele.style.display=='none') 
      ele.style.display=='block'; 
     else 
      ele.style.display=='none'; 

应该

 if(ele.style.display=='none') 
      ele.style.display='block'; 
     else 
      ele.style.display='none'; 
+0

哈哈,谢谢 - 我觉得很愚蠢...... – jreed121 2011-04-03 04:23:56