複数のレイヤの表示/

Question

<script language="JavaScript"> 
function setVisibility(id) { 
    if(document.getElementById('bt1').value=='Hide Layer'){ 
    document.getElementById('bt1').value = 'Show Layer'; 
    document.getElementById(id).style.display = 'none'; 
    } 
    else{ 
    document.getElementById('bt1').value = 'Hide Layer'; 
    document.getElementById(id).style.display = 'inline'; 
    } 
} 

<h4 id='bt1' style="cursor: hand;" value='Show Layer' onclick="setVisibility('sub1');" >menu1</h4> 
<span class="detail" id="sub1">menu1_contents</span> 

<h4 id='bt1' style="cursor: hand;" value='Show Layer' onclick="setVisibility('sub2');" >menu2</h4> 
<span class="detail" id="sub2">menu2_contents</span> 

<h4 id='bt1' style="cursor: hand;" value='Show Layer' onclick="setVisibility('sub3');" >menu3</h4> 
<span class="detail" id="sub1">menu3_contents</span> 

ワンクリックを非表示にする - >表示するレイヤ セカンドクリック - ショー/同じメニューを隠しながら>隠すレイヤー

それは問題ありません。しかし、「menu2」をクリックすると、背景に「menu1_contents」のまま残りました。そして、次のメニューをクリックすると、それは包まれています。

「menu2」をクリックすると、自動的に「menu1」のコンテンツを非表示にすることができます。

ありがとうございました。

Answer 1

jqueryの中でそれを行うだろう：

function setVisibility(id) { 
    if($('#bt1').val()=='Hide Layer'){ 
    $('#bt1').val('Show Layer'); 
    $('#' + id).hide().removeClass("showing"); 
    } 
    else{ 
    $('#bt1').val('Hide Layer'); 
    $('.showing').removeClass("showing"); 
    $('#' + id).show().addClass("showing"); 
    $('span:not(.showing)').hide(); 
    } 
} 

ああと、本当に重要な

をjQueryライブラリを追加します。そして、あなたは本当に私が持っているアイデアを非表示にする場合に使用されるjavascriptの使用したい場合あなたが今表示しているものではありません（少し厄介なもの）