隐藏和显示使用JavaScript

Question

多个HTML元素我有一些表在这里，用低于这个的JavaScript，我让他们隐藏和显示每次他们按钮用户点击。我想添加到这个脚本中的是，当有人点击桌子上的按钮来显示时，所有其他的都被隐藏起来。任何想法我怎么能做到这一点？先谢谢你！

这是我的html代码：

<table id="SC1_TH_" class="header_op"><tr><td> 
<div id="SC1_BSH_" onClick="SC[1]();" class="hide_button">*</div>OPTION ONE 
</td></tr></table> 
<div id="SC1_BO_" style="display:dlock;">BLAH BLAH</div> 

<table id="SC2_TH_" class="header_cl"><tr><td> 
<div id="SC2_BSH_" onClick="SC[2]();" class="show_button">*</div>OPTION ONE 
</td></tr></table> 
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div> 

<table id="SC3_TH_" class="header_cl"><tr><td> 
<div id="SC3_BSH_" onClick="SC[3]();" class="show_button">*</div>OPTION ONE 
</td></tr></table> 
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div> 

这是我的javascript：

<script type="text/javascript"> 

var SC = []; 

for (var i = 1; i < 10; i++) { 

SC[i] = (function(i){ 

return function(){ 

var SC_TH = document.getElementById('SC'+i+'_TH_'); 
var SC_BSH = document.getElementById('SC'+i+'_BSH_');  
var SC_BO = document.getElementById('SC'+i+'_BO_'); 

    if (SC_BO.style.display == 'block' || SC_BO.style.display == ''){ 
     SC_TH.className  = 'header_cl'; 
     SC_BSH.className  = 'show_button'; 
     SC_BO.style.display = 'none';} 
else {SC_TH.className  = 'header_op'; 
     SC_BSH.className  = 'hide_button'; 
     SC_BO.style.display = 'block';} 
    }})(i);}  
</script> 

---

编辑：换句话说，我需要的东西说，如果此按钮点击 r现在是东西所有的其他是隐藏 !!!

Answer 1

这里有一个working example与一些非常简单的jQuery（推荐）代码。

HTML：

<table><tr><td> 
<div class="toggle-button">*</div>OPTION ONE 
</td></tr></table> 
<div class="toggle">BLAH BLAH</div> 

<table><tr><td> 
<div class="toggle-button">*</div>OPTION ONE 
</td></tr></table> 
<div class="toggle">BLAH BLAH</div> 

<table><tr><td> 
<div class="toggle-button">*</div>OPTION ONE 
</td></tr></table> 
<div class="toggle">BLAH BLAH</div> 

JS：

$(function() { 
    $('div.toggle').hide(); 
    $('.toggle-button').click(function(){ 
     $('div.toggle').hide(); 
     $(this).closest('table').next('div.toggle').show(); 
    }); 
}); 

如@StephenByrne提到的，我也强烈建议使用现有的部件，诸如jQuery Accordian。它需要几分钟的时间来完成，并附带一系列可供选择的主题，并且可以完全自定义。你可以花几个小时或几天写你自己的。除非是学习练习，否则只是浪费时间。没有必要重新发明轮子。

正如你已经表明对js-only的强烈推动，这里是一个working js-only solution。

HTML：

<table id="SC1_TH_" class="header_op"><tr><td> 
<div id="SC1_BSH_" onclick="toggle(this);" class="hide_button">*</div>OPTION ONE 
</td></tr></table> 
<div id="SC1_BO_" style="display:block;">BLAH BLAH</div> 

<table id="SC2_TH_" class="header_cl"><tr><td> 
<div id="SC2_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE 
</td></tr></table> 
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div> 

<table id="SC3_TH_" class="header_cl"><tr><td> 
<div id="SC3_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE 
</td></tr></table> 
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div> 

JS：

function toggle(src) { 
    var id = src.id; 
    var index = id.substring(2, 3); 

    var i = 1; 
    var toggleItem = document.getElementById('SC' + i.toString() + '_BO_'); 

    while (toggleItem != null) { 
     var bShow = index == i; 
     var button = document.getElementById('SC' + i.toString() + '_BSH_'); 
     var table = document.getElementById('SC' + i.toString() + '_TH_'); 

     if (bShow) { 
      toggleItem.style.display = 'block'; 
      toggleItem.className = 'setitemclassname'; 
      button.className = 'setbuttonclassname'; 
      table.className = 'settableclassname'; 
     } 
     else { 
      toggleItem.style.display = 'none'; 
      toggleItem.className = 'setitemclassname'; 
      button.className = 'setbuttonclassname'; 
      table.className = 'settableclassname'; 
     } 
     toggleItem = document.getElementById('SC' + (++i).toString() + '_BO_'); 
    } 
} 

内部时index == i计算结果为true的while循环，你知道你必须展示的项目。在那里添加额外的逻辑来改变你的类名。

Answer 2

只要隐藏所有这些，然后显示应该打开的那个。这个脚本是不是elegantest的解决方案，而是直接在您的编码风格整合：

for (var i = 1; i < 10; i++) { 
    SC[i] = (function(i){ 
     var SC_TH = document.getElementById('SC'+i+'_TH_'), 
      SC_BSH = document.getElementById('SC'+i+'_BSH_'), 
      SC_BO = document.getElementById('SC'+i+'_BO_'); 

     return function(action) { 
      if (!action) action = SC_BO.style.display=="none" ? "show" : "hide"; 

      if (action == "show") { 
       for (var i=0; i<SC.length; i++) 
        SC[i]("hide"); 
       SC_TH.className  = 'header_op'; 
       SC_BSH.className  = 'hide_button'; 
       SC_BO.style.display = ''; 
      } else { 
       SC_TH.className  = 'header_cl'; 
       SC_BSH.className  = 'show_button'; 
       SC_BO.style.display = 'none'; 
      } 
     }; 
    })(i); 
} 

Answer 3

一个cleaner solution涉及改变你的HTML位，以及 - 摆脱onclick，并用一个类（toggleItem），将取代它允许javascript识别要切换的项目。我还确保所有按钮都具有button类别，因此可以识别它们。

<table id="SC1_TH_" class="header"> 
    <tr> 
    <td> 
     <div id="SC1_BSH_" class="button">*</div>OPTION ONE</td> 
    </tr> 
</table> 
<div id="SC1_BO_" class="toggleItem">BLAH BLAH</div> 
<table id="SC2_TH_" class="header"> 
    <tr> 
    <td> 
     <div id="SC2_BSH_" class="button">*</div>OPTION ONE</td> 
    </tr> 
</table> 
<div id="SC2_BO_" class="toggleItem">BLAH BLAH</div> 
<table id="SC3_TH_" class="header"> 
    <tr> 
    <td> 
     <div id="SC3_BSH_" class="button">*</div>OPTION ONE</td> 
    </tr> 
</table> 
<div id="SC3_BO_" class="toggleItem">BLAH BLAH</div> 

然后在JavaScript：

var buttons = document.getElementsByClassName('button'), 
    toggleItems = document.getElementsByClassName('toggleItem'), 
    tables = document.getElementsByClassName('header'); 
for (var i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = getFunction(toggle, i); 
} 
// getFunction is needed for reasons to do with variable scope 
function getFunction(f, p) {return function() {f(p)}} 
function toggle(selected) { 
    for (var i = 0; i < toggleItems.length; i++) { 
     toggleItems[i].style.display = i == selected ? '' : 'none'; 
     tables[i].className = i == selected ? 'header open' : 'header closed'; 
     buttons[i].className = i == selected ? 'button show' : 'button hide'; 
    } 
} 
toggle(0); // initially show only the first one 

（这一点假设按键和拨动项目将在相同的顺序如果不是，你将不得不恢复到检查的情况下他们。 ID或找一些其他方式的项目和按钮关联。）

（编辑，包括改变类表和按钮）的