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的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以便更容易地选择它们。我还给了你2个.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/

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

3 个答案: