0

我有一些 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>
4

3 回答 3

0

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

如果你想更健壮，或者如果你用很多 div 来做这件事，你有几个选择。您可以将所有 div 放在一个数组中并检查它们是否打开（或者display='none'如果它不会让您减慢太多，则将它们全部设置为）。您还可以根据需要创建一个带有打开的数组push和splice它们的数组。不过，我认为最终，最好根据是否显示来更改 div 的 CSS 类，这样你就可以使用document.getElementsByClassName.

于 2013-10-27T03:55:54.653 回答
0

您的功能几乎相同，您可以通过将按钮值作为参数来组合它们。要切换另一个 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>
于 2013-10-27T03:56:55.503 回答
0

使用 jQuery.show()和.hide().

我摆脱了您的功能并用 jQuery 替换它们我还提供了按钮 id 以使选择它们更容易。我还为您提供了.show()and.hide()方法的 2 个示例。

`$("#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/

于 2013-10-27T04:20:40.917 回答