使用javascript隐藏和显示div答案

【问题标题】：Hiding and showing div, using javascript使用javascript隐藏和显示div
【发布时间】：2012-03-26 20:16:16
【问题描述】：

在处理学校项目时，我遇到了一个问题，使用 javascript 显示和隐藏几个 div（确切地说是五个）。我希望能够打开所有五个并将它们放在页面上使用位置：绝对和顶部和左侧坐标，因为这使它们漂浮在我的文本内容之上我制作了一个单独的 div，命名为 wrapper 以占据它们的空间并推送文字下来。然而，看起来完美的代码 sn-p 却不是。名为 gs 1 - gs 5 的菜单 div 或占位 div 均未显示。计数器背后的想法是，如果一个菜单div被打开counter ++，否则（意味着菜单被设置为未隐藏）计数器被减去，因此如果没有打开计数器等于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 sn-p

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

【问题讨论】：

只是为了好玩，你能alert(item.className); 这是完整的代码示例吗？因为如果不是这样，你可能很难使用item.className == 'hidden'，因为会有不止一个类......
很好奇...你能告诉我们为那些有问题的 div 输出的代码吗？我想知道除了隐藏或未隐藏之外，他们是否偶然还有其他课程。或者就此而言，如果您一开始就没有任何课程输出它们。
div 中还没有输出数据，只有 css 代码 #gs1 { height: 400px; width: 192px; background-color: grey; left: 384px; top: 0; } 与所有 5 个 div 相同，不包括名称“gs”后面的数字
是的，它是完整的代码，只有 javascript 标签被遗漏了
向我们展示更多代码。由于您未包含其他代码，您可能会遇到一些错误！

标签： javascript css html

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：