Javascript 移动设备上的可折叠菜单

我有一些显示或隐藏文本的按钮代码。Java脚本和html如下所示。但是，我想添加多个按钮来实现相同的功能，但是正如您在下面看到的，“bt1”是硬编码到脚本中的。如何将其他按钮的不同id传递到脚本中？我是一个Java脚本新手

谢谢

JAVASCRIPT

<script language="JavaScript">
function setVisibility(id) {

if(document.getElementById('bt1').value=='Hide Layer     \u2228')

    {
    document.getElementById('bt1').value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    document.getElementById('bt1').value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

</script>

函数设置可见性（id）{
if（document.getElementById（'bt1'）。值=='Hide Layer\u2228'）
{
document.getElementById（'bt1'）。值='Show Layer\x3E'；
document.getElementById（id）.style.display='none'；
}
其他的
{
document.getElementById（'bt1'）。值='Hide Layer\u2228'；
document.getElementById（id）.style.display='inline'；
}
}

HTML

洛伦同侧

使用

此

关键字将引用传递给单击的元素，如下所示：

 <input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility(this);";>

function setVisibility(element) {
  // now element refers to the clicked element
  id = element.id;
  value = element.value;

  //rest of your logic
  if(document.getElementById('bt1').value=='Hide Layer     \u2228')
  {
   document.getElementById('bt1').value = 'Show Layer     \x3E';
   document.getElementById(id).style.display = 'none';
  }
  else
  {
   document.getElementById('bt1').value = 'Hide Layer     \u2228';
   document.getElementById(id).style.display = 'inline';
 }
}

---

将按钮作为附加参数传递：

<input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility(this,'sub3');">

---

将div id和按钮id传递给

setVisibility（）

函数

使用此代码

<table>
    <tr>
        <td scope="col">
          <input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3',this);";>
        </td>
   </tr>
   <tr>
      <td>
          <div id="sub3">
                <p>Loren Ipsum</p>
                <p>&nbsp;</p>
           </div>
      </td>
    </tr>
    <tr>
        <td scope="col">
          <input class="bt" width="100%" type=button name=type id='bt2' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3',this);";>
        </td>
    </tr>
 </table>


<script language="JavaScript">
function setVisibility(id,btn_id) {
alert(id+"   "+btn_id.id);
var button_id=btn_id.id;
if(document.getElementById(button_id).value=='Hide Layer     \u2228')

    {
    document.getElementById(button_id).value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    document.getElementById(button_id).value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

</script>

洛伦同侧


功能设置可见性（id，btn_id）{
警报（id+“”+btn_id.id）；
var按钮id=btn按钮id.id；
if（document.getElementById（按钮id）.value=='Hide Layer\u2228'）
{
document.getElementById（button_id）.value='Show Layer\x3E'；
document.getElementById（id）.style.display='none'；
}
其他的
{
document.getElementById（button_id）.value='Hide Layer\u2228'；
document.getElementById（id）.style.display='inline'；
}
}

所以你想要两个按钮，一个显示，一个隐藏，对吗？

function setVisibility(btn,id) {

if(btn.value=='Hide Layer     \u2228')

    {
    btn.value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    btn.value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

<table>
    <tr>
        <td scope="col">
          <input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3',this);";>
        </td>
   </tr>
   <tr>
      <td>
          <div id="sub3">
                <p>Loren Ipsum</p>
                <p>&nbsp;</p>
           </div>
      </td>
    </tr>
    <tr>
        <td scope="col">
          <input class="bt" width="100%" type=button name=type id='bt2' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3',this);";>
        </td>
    </tr>
 </table>


<script language="JavaScript">
function setVisibility(id,btn_id) {
alert(id+"   "+btn_id.id);
var button_id=btn_id.id;
if(document.getElementById(button_id).value=='Hide Layer     \u2228')

    {
    document.getElementById(button_id).value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    document.getElementById(button_id).value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

</script>