隱藏和顯示使用JavaScript

多個HTML元素我有一些表在這裏，用低於這個的JavaScript，我讓他們隱藏和顯示每次他們按鈕用戶點擊。我想添加到這個腳本中的是，當有人點擊桌子上的按鈕來顯示時，所有其他的都被隱藏起來。任何想法我怎麼能做到這一點？先謝謝你！隱藏和顯示使用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現在是東西所有的其他是隱藏 !!!

來源

2013-01-20 DNA180

有沒有你不使用例如JQ一個特別的原因uery等？「手風琴」風格的顯示和隱藏是大多數js庫解決的問題：[看這裏]（http://jqueryui.com/accordion/） –

是的，我的朋友導致我**應該讓我自己！您看到的訂單... – DNA180

有人命令您使用內嵌Javascript而不是像JQuery這樣的框架？ – Soviut

這裏有一個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循環，你知道你必須展示的項目。在那裏添加額外的邏輯來改變你的類名。

來源

2013-01-20 10:58:02

OP需要JavaScript ... – ATOzTOA

@ATOzTOA這是一個*推薦*併爲社區增加了價值，可能正在尋找相同的解決方案，而不依賴於JS。給OP準確地提供他們想要的東西並不總是最好的，但也可以提出更好的解決方案。 –

你的例子非常好，我的朋友，謝謝你的回答，你的時間！但我需要的東西，將補丁上面我的JavaScript代碼... – DNA180

只要隱藏所有這些，然後顯示應該打開的那個。這個腳本是不是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); 
}

來源

2013-01-20 11:40:01 Bergi

謝謝你的回答我的朋友！ – DNA180

@Bergi *「不是elegantest解決方案」*。這是對今年的低估。我們不應該推銷難以辨認的代碼。 –

@flem：不要責怪他:)他只是試圖讓它接近我的編碼風格，他說！ – DNA180

一個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或找一些其他方式的項目和按鈕關聯。）

（編輯，包括改變類表和按鈕）的

來源

2013-01-20 12:39:27 Stuart

隱藏和顯示使用JavaScript

回答

相關問題