使一个JavaScript切换按钮关闭另一个

Question

我有一些JavaScript切换按钮； 切换一些内容； 他们彼此相邻，独立工作； 唯一的问题是我想要它，以便当您打开一个“ div”时； 另一个将消失，反之亦然。 现在，如果您先切换一个然后再切换另一个，则它们都将同时显示。 我试图自己更改此代码，但无法弄清楚，所以我想知道是否有人知道如何适应此代码。 该页面位于此处：（ http://gtdsites.com/1a-toggle-buttons/ ）。

这是我的代码：

<script type="text/javascript">
function toggleMe(btn,a){
    var e1=document.getElementById(a);
    if(!e1)return true;
    if(e1.style.display=="none"){
        e1.style.display="block";

        btn.value = "MENU";
    }
    else{
        e1.style.display="none";
        btn.value = "MENU";
    }
    return true;
}
</script>

<script type="text/javascript">
function toggleMe1(btn,a2){
    var e2=document.getElementById(a2);
    if(!e2)return true;
    if(e2.style.display=="none"){
        e2.style.display="block";

        btn.value = "CART";
    }
    else{
        e2.style.display="none";
        btn.value = "CART";
    }
    return true;
}
</script>


<div id="mobile_buttons_cont">
  <input class="mobile_buttons" type="button" onclick="return toggleMe(this,'gman123')"
         value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="mobile_buttons" type="button" onclick="return toggleMe1(this,'gman124')"
         value="CART">
</div>

<div id="gman123" style="display: none">
  <br/>
  <ul class="gsites_header2">
    <li class="gsites_header2">
      <a href="/contact/">CONTACT</a>
    </li>

    <li class="gsites_header2">
      <a href="/services/">SERVICES</a>
    </li>

    <li class="gsites_header2">
      <a href="/index/">INDEX</a>
    </li>
  </ul>
</div>

<div id="gman124" style="display: none">
  <br/>
  <?php
     echo do_shortcode('[do_widget id=cart66cartwidget-2]');
  ?>

</div>

Answer 1

最快，最简单的方法是在每次打开一个显示器时将另一个显示器的显示设置为'none' 。 例如，您可以只添加以下代码行document.getElementById(a2).display='none'; 高于e1.style.display="block"; 。

如果您想变得更强大，或者要使用大量的div来执行此操作，则有两种选择。 您可以将所有div放入数组中，并检查它们是否打开（或者将它们全部设置为display='none'如果这样做不会使您的速度变慢）。 您也可以使用打开的数组创建一个数组，然后根据需要push和splice它们。 不过，我认为最终最好的方法是根据div的CSS类是否显示来最好地为您服务，这样您就可以使用document.getElementsByClassName快速找到所显示的元素。

Answer 2

您的功能几乎相同，可以通过将按钮值作为参数来组合它们。 并切换另一个DIV，将其ID作为另一个参数传递。

<script>
function toggleMe(btn,btnval,thisdiv,otherdiv){
    var e1=document.getElementById(thisdiv);
    var e2=document.getElementById(otherdiv);
    if(!e1 || !e2) {
        return true;
    }
    if(e1.style.display=="none"){
        e1.style.display="block";
        e2.style.display="none";
    } else {
        e1.style.display="none";
        e2.style.display="block";
    }
    btn.value = btnval;
    return true;
}
</script>

<div id="mobile_buttons_cont">
  <input class="mobile_buttons" type="button" onclick="return toggleMe(this, 'MENU', 'gman123', 'gman124')"
         value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="mobile_buttons" type="button" onclick="return toggleMe1(this, 'CART', 'gman124', 'gman123')"
         value="CART">
</div>

Answer 3

有与jQuery的这样做的更简单的方法.show()和.hide()

我摆脱了您的函数，并用jQuery替换了它们，还给了按钮id以简化选择它们。 我还为您提供了.show()和.show() .hide()方法的两个示例。

`$("#btn_1").click(function(){
$("#btn_2").hide();
});
$("#btn_2").click(function(){
$("#btn_1").hide(); 
});
$("#btn_3").click(function(){
$("#btn_3").hide();
});
$("#btn_4").click(function(){
$("#btn_4").hide(); 
});`

这是工作演示。

http://jsfiddle.net/ryanhagz/rFp7w/