html - 设置为无后显示 block 不显示

Question

我有如下的菜单设计

<div class="span2 main-menu-span">
    <div class="well nav-collapse sidebar-nav">
        <ul class="nav nav-tabs nav-stacked main-menu">
            <li class="nav-header hidden-tablet"><span id="menu1" style="cursor: pointer; cursor: hand;" onClick=checkMenu('menu1')>-</span> Main 1</li>
            <li id='menu1a'><a class="ajax-link" href="menu1a.php"><span class="hidden-tablet">Menu 1 a</span></a></li>
            <li id='menu1b'><a class="ajax-link" href="menu1b.php"><span class="hidden-tablet">Menu 1 b</span></a></li>
        </ul>
    </div>
</div>  

我想做的是，当用户按下“-”符号时，它会隐藏它并且符号变为“+”，但随后我按下它就再也不会出现了。

function checkMenu(idVal){
   var idValue = idVal;
   //alert("Mwnu value :" +idValue);
   //alert("Mwnu value :" +document.getElementById(idValue).innerHTML);
   if(document.getElementById(idValue).innerHTML=="+"){
      if(idValue == "menu1" ){
        //alert("Mwnu value :" +idValue);
        document.getElementById("menu1a").style.display="block";
        document.getElementById("menu1b").style.display="block";            
        document.getElementById("menu1").innerHTML ="-" ;
      }         
   }
   if(document.getElementById(idValue).innerHTML=="-"){
      if(idValue=="menu1"){             
        //alert("Mwnu value :" +document.getElementById("menu1a").style.display);
        document.getElementById("menu1a").style.display="none";
        document.getElementById("menu1b").style.display="none";
        document.getElementById("menu1").innerHTML ="+" ;
      }         
   }

Answer 1

你需要一个else if:

else if(document.getElementById(idValue).innerHTML=="-")
{
...