Question

我在这里有一些表格，并使用下面的 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>

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

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_');
    }
}

当while评估为index == i时，true循环内部，您知道您有要显示的项目。在那里添加额外的逻辑来改变你的类名。

Answer 2

只需隐藏所有这些，然后显示应切换为打开的那个。这个脚本不是最好的解决方案，而是直接集成在您的编码风格中：

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并将其替换为允许javascript识别项目的类（toggleItem）切换。我还确保所有按钮都有类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或找到其他方式关联项目和按钮。）

（已编辑以包括更改表格和按钮的类别）

使用javascript隐藏和显示多个html元素

3 个答案: