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>

点击一下 - ＆gt;显示图层第二次点击 - ＆gt;隐藏图层

显示/隐藏相同菜单时没问题。但是当我点击“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我会得到的想法，如果隐藏彼此的跨度，而不是你现在正在显示的那个（有点蹩脚）

多层显示/隐藏

1 个答案: