如何使用 jquery 制作显示/隐藏切换按钮答案

【问题标题】：how to make a show/hide toggle button with jquery如何使用 jquery 制作显示/隐藏切换按钮
【发布时间】：2011-10-29 05:28:00
【问题描述】：

您好，我一直在尝试使用 jquery 制作显示/隐藏切换按钮，但我只能找到显示 div 但没有隐藏它的按钮

下面是我发现的一个例子，它显示了一个 div，但除非你点击另一个按钮，否则它不会让你隐藏它。我希望能够使用相同的按钮来显示和隐藏 div。我的页面上有多个 div，希望能够使用 jquery 而不是 javascript。

<html>
 <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){

        $(".buttons").click(function () {
        var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");
        });

      });
</script> 
     </head>
        <body>


 <div id="buttonsDiv"> 

  <input type="button" id="button1" class="buttons" value="div1"></input>
  <input type="button" id="button2" class="buttons" value="div2"></input>
  <input type="button" id="button3" class="buttons" value="div3"></input>
  <input type="button" id="button4" class="buttons" value="div4"></input>

  </div>

   <div>

     <div id="div1" style="display:none">
    Hello World
     </div>

     <div id="div2" style="display:none">
       Test
   </div>

        <div id="div3" style="display:none">
          Another Test
  </div>

     <div id="div4" style="display:none">
     Final Test
     </div>


         </div>


     </body>
    </html>

【问题讨论】：

jQuery 是 javascript！
我在How to create JQuery plugin to convert radio buttons into toggle buttons和Here you can see demo上写了教程

标签： jquery html button hide show

【解决方案1】：

试试这个

$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).slideToggle().siblings().hide("slow");
});

【讨论】：

谢谢，正是我需要的。

【解决方案2】：

使用控件自带的切换功能更简单。

$('.toggleButtons').click(function()
{
    $('control1, control2, ...').toggle();
});

【讨论】：

我是否必须为每个按钮设置一种切换方法？因为要控制的 div 名称会不同
对于每个按钮是的，我认为是的，但是如果您希望通过单个按钮隐藏/显示多个区域，然后用逗号分隔，代码已更新。

【解决方案3】：

Demo

$(document).ready(function(){
    $(".buttons").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
    });
});

应该可以的。

编辑：

toggle 的功劳归@AtoMerZ。他先拥有它。

【讨论】：

【解决方案4】：

用这个切换你的脚本：

<script>
    $(document).ready(function(){
        $(".buttons").click(function () {
           $("#buttonsDiv div").hide()
          var divname= this.value;
          $("#"+divname).show();
        });
    });
</script>

【讨论】：

toggle() 不应该应用于 $(this) 而是应用于与单击按钮相关的 div。
$("#buttonsDiv").child() 会给什么？

【解决方案5】：

这是一个非常简单的脚本：

$('.buttons').click(function()
{
    var elementToShowOrHide = $('#' + $(this).val());

    if(elementToShowOrHide.is(':visible'))
       elementToShowOrHide.hide();
    else
       elementToShowOrHide.show();
});

每次点击按钮都会切换其他元素的可见性。

【讨论】：

【解决方案6】：

jQuery .toggle() 方法应该可以帮助您：

$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).toggle();
});

来源：http://api.jquery.com/toggle/

【讨论】：

【解决方案7】：

您可以使用toggle 方法来显示和隐藏元素。这将分别显示/隐藏每个 div：

$(".buttons").click(function () {
  $("#" + this.value).toggle("slow");
});

【讨论】：

【解决方案8】：

假设您希望在显示新divs 时隐藏所有其他@s：

$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });

JS Fiddle demo.

【讨论】：