javascript - 隐藏和显示 div，使用 javascript

Question

在处理学校元素时，我遇到了使用 javascript 显示和隐藏几个 div(准确地说是五个)的问题。我希望能够打开所有五个并使用 position:absolute 以及顶部和左侧坐标将它们放在页面上，因为这会使它们浮在我的文本内容之上我制作了一个单独的 div，命名为 wrapper 以占据它们的空间并推送文字下来。然而，看似完美的代码片段却并非如此。名为 gs 1 - gs 5 的菜单 div 或占用的 div 均未显示。计数器背后的想法是，如果一个菜单 div 被打开计数器++，否则(意味着菜单被设置为未隐藏)计数器被减去，因此如果没有打开计数器等于 0 并且占用应该被设置为隐藏.

int count = 0;

function unhide(col2) {

var item = document.getElementById(col2);
var wrap = document.getElementById('wrapper');

    if (item) 
    {       
        //wrap.className=(item.className=='hidden')?'unhidden':'hidden';
        item.className=(item.className=='hidden')?'unhidden':'hidden';  

        if(item.className=='unhidden')
        {
        count++;            
        }
        else if(item.className=='hidden')
        {
        count--;
        }
    if(count > 0)
    {
    wrap.className=(item.className=='hidden')?'unhidden':'hidden';  
    }

    }




 }
<a href="javascript:unhide('gs1');">Game Station 1</a>
<a href="javascript:unhide('gs2');">Game Station 2</a>  
<a href="javascript:unhide('gs3');">Game Station 3</a>
<a href="javascript:unhide('gs4');">Game Station 4</a>
<a href="javascript:unhide('gs5');">Game Station 5</a>

</div>
    <div id="wrapper" class="hidden">
        <div id="gs1" class="hidden">       
        </div>

        <div id="gs2" class="hidden">   
        </div>


        <div id="gs3" class="hidden">       
        </div>

        <div id="gs4" class="hidden">       
        </div>

        <div id="gs5" class="hidden">       
        </div>
    </div>

还有小的 CSS 片段

.hidden { visibility: hidden; display: none;}
.unhidden { visibility: visible; display: block;}

Answer 1

这是因为在 div 取消隐藏后包装器被标记为隐藏。请参阅我的示例 - http://jsfiddle.net/MYaNb/2/ .