使一個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/