0

我有一个通过 onClick 显示/隐藏的脚本。我可以让它显示/隐藏就好了，但我不能让它显示/'隐藏其他所有东西'。所以当我真的只想要一个时，我得到的是一堆打开的容器。

Javascript：

<script>
    function showfields(fields){
        if(document.getElementById(fields).style.display=='none'){
            document.getElementById(fields).style.display='block';
        }
        else{
            document.getElementById(fields).style.display = 'none';
        }
    }
</script>

HTML：

<div id="hidden" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button>
</div>
<div id="hidden2" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something2</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden3" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something3</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden4" class="steps" style="display: block;">
    <div class="section" style="margin-right: 10px;">
        <h2>Something4</h2>
    </div>
    <button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button>
</div>

谢谢

4

4 回答 4

3

由于您已使用 jQuery 对此进行了标记，因此我认为这是一个选项：

function showfields(fields){
  $('.steps').hide()
  $('#' + fields).show();
}
于 2012-06-05T16:32:57.893 回答
1

编辑： 这是你想要做的：http: //jsfiddle.net/Rykus0/67cjt/2/ （没有jQuery）

（ps - 这可以做得更好）

您的问题不是很清楚，但我猜您希望页面从除第一个 div 隐藏之外的所有内容开始。

在这种情况下，你所拥有的很好，只需设置style="display:none;"你一开始不想显示的元素（你也可以使用一个类）。

另外，我相信您应该将对 hidden3 的onclick调用更改为showfields('hidden4')并从 hidden4 中删除 onclick 事件

于 2012-06-05T16:36:37.440 回答
0

我同意波尔科，

例如，另一种选择是使用类作为标志

function showFields(fields){
     $(fields).each(function(){
         if($(this).hasClass('visible'){
              $(this).hide();
         }
         else {
              $(this).show();
         }
     }
}
于 2012-06-05T16:38:21.710 回答
0

不使用 jquery 。这段 javascript 可以帮助你

  <script>
        function showfields(fields){
          for(var i=0;i<document.body.getElementsByTagName("*").length;i++)
          { if(document.body.getElementsByTagName("*")[i].id==field)
            {
            document.body.getElementsByTagName("*")[i].style.display='block';
            }
            else{
                 document.body.getElementsByTagName("*")[i].style.display='block';

            }
        }
    </script>
于 2012-06-05T16:39:09.230 回答