Question

我有一个显示/隐藏通过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>

由于

Answer 1

由于你用jQuery标记了这个，我认为这是一个选项：

function showfields(fields){
  $('.steps').hide()
  $('#' + fields).show();
}

Answer 2

修改这是你要做的事情：http://jsfiddle.net/Rykus0/67cjt/2/ （没有jQuery）

（ps - 这可以做得更好）

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

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

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

Answer 3

我同意Porco，

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

function showFields(fields){
     $(fields).each(function(){
         if($(this).hasClass('visible'){
              $(this).hide();
         }
         else {
              $(this).show();
         }
     }
}

Answer 4

不使用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>

微调这个javascript函数？

4 个答案: