javascript - 无法识别我是否已单击列表项

Question

我想检查当我点击“下载驱动程序”时，其他行是否打开，当我再次点击“下载驱动程序”时，它应该再次关闭。没有悬停只是点击。当我点击下载驱动程序下面的一些 li 时，我也不希望它关闭

这是我的 HMTL:

<ul class="dropdown">
    <li><a id="drivers" onclick="dropdown(this); return false;" class="dir">Download Drivers</a>
        <ul id="driversmenu" class="sub">
            <li><a>Download Drivers</a></li>
            <li><a>Driver Widget</a></li>
            <li><a>NVIDIA Software</a></li>
        </ul>
    </li>
    </ul>

这是 Javascript 代码:

   function dropdown(obj)
   {
       alert("klik");
       var elements = document.getElementsByClassName("sub");
       var ids = '';
       for (var i = 0; i < elements.length; i++)
       {
           document.getElementById(elements[i].id).style.display = 'none';
       }

       if (document.getElementById(obj.id + 'menu').style.display == 'block')
       {
           alert("al open");
           document.getElementById(obj.id + 'menu').style.display = 'hidden';
       }
       else if (document.getElementById(obj.id + 'menu').style.display = 'hidden')
       {
           alert("niet open");

           document.getElementById(obj.id + 'menu').style.display = 'block';
       }
       return false;
   };

还有css，但我不知道它是否相关:

ul.dropdown {    list-style-type: none; width: 300px;float: left; height: 0px; margin-top: 0px; padding-left: 0px; }
ul.dropdown a { display: block; color: white; text-decoration: none;     list-style-type: none; }
ul.dropdown li {  float: left; padding: 0 0px; border: 1px dotted #d0d0d0;     list-style-type: none;}
ul.dropdown li ul { display: none; position: absolute; z-index: 99; }
ul.dropdown li ul li { clear: both; margin-left: 0px; padding-left: 0px; border: 0; min-width: 150px;  }
ul.dropdown li ul li:hover { background-color: #d1d1d1; }
ul.dropdown li ul li:hover a { color: red; }

我只收到来自“Klik”和“Niet open”的警报，所以这个永远不会打电话:

if (document.getElementById(obj.id + 'menu').style.display == 'block')
{
    alert("al open");
    document.getElementById(obj.id + 'menu').style.display = 'hidden';
}

有人知道我做错了什么吗？提前致谢

Answer 1

尝试

function dropdown(obj)
{
    var elements = document.getElementsByClassName("sub");
    var ids = '', display = document.getElementById(obj.id+'menu').style.display;
    for(var i=0; i < elements.length; i++) {
        elements[i].style.display='none';
    }
    if(!display || display=='none'){
        document.getElementById(obj.id+'menu').style.display='block';
    }
    return false;
}; 

演示:Fiddle