使用javascript隱藏和顯示div

Question

在進行學校項目時，我遇到了一個問題，使用javascript來顯示和隱藏幾個div（准確地說是五個）。 我希望能夠打開所有五個，並使用position：absolute和top和left坐標將它們放置在頁面上，因為這使它們浮動在我的文本內容之上，因此我創建了一個單獨的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/ 。

Answer 2

把它放在css中

.show_hide 
    {
        display: none;
    }

將其放在頁面的頭部。

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".slidingdiv").hide();
        $(".show_hide").show();
        $('.show_hide').click(function()
        {
            $(".slidingdiv").slideToggle();
        });
     });
</script>

將其放在顯示和隱藏div的位置

<div class="slidingdiv">
   something
</div>

<a href="#" class="show_hide">show/hide</a>