如何让div隐藏onclick并在再次点击时显示它？

我有这样的代码：如何让div隐藏onclick并在再次点击时显示它？

<script> 
(function ($) { 
    $(document).ready(function() { 
     $("#thisclick, #thisclick2").click(function() { 
      if ($('.example').is(":hidden")) { 
       $(this).html($(this).html().replace(/Hide/, 'Show')); 
      } else { 
       $(this).html($(this).html().replace(/Show/, 'Hide')); 
      } 
      // Do it afterwards as the operation is async 
      $(".example").hide(); 
     }); 
    }); 
})(jQuery); 
</script>

当前代码的工作方式是，如果被点击#thisclick它隐藏#example。这是我需要的，但是当再次点击#thisclick时，我希望它显示#example。使用上面的代码，它不会工作。我该怎么做才能做到这一点？

来源

2013-04-01 starbucks

使用[JQuery的.hide（）]（HTTP ：//api.jquery.com/hide/）和[JQuery .show（）]（http://api.jquery.com/show/）。 – Vucko

如果我正确理解你，你有$（'＃thisclick'）。slideToggle（'slow'）;'而不是'$（'＃example'）。slideToggle（'slow'）;'。 – Kyle

@kyle，对不起，我发布了旧代码。我用我目前使用的那个更新了我的问题。 – starbucks

你应该能够改变你的代码如下所示：

(function ($) { 
    $(document).ready(function() { 
    $("#thisclick").click(function() { 
     $("#example").slideToggle("slow"); 
     }); 
    }); 
})(jQuery);

这里是一个快速的样品链接： http://jsfiddle.net/andyjmeyers/szmXp/

来源

2013-04-01 12:36:44

谢谢安迪。它工作正常，但我有两个我正在使用的ID。只要我点击第二个，它就会起作用，但如果我使用第一个，它将不起作用。这是我如何使用这一行：$（“＃thisclick，＃thisclick2”）。click（function（）{ – starbucks

我更新了包括2个按钮的小提琴都执行相同的函数调用。（）＃thisclick，＃thisclick2“）。click（function（）{}） –

谢谢，这与我更新你的初始代码一样，但它不会按照它的方式工作。 – starbucks

<script> 
    (function ($) { 
      $(document).ready(function() { 
      $("#thisclick").click(function() { 
      if ($('#example').is(":hidden")) { 
       $(this).html($(this).html().replace(/Hide/, 'Show')); 

      } else { 
       $(this).html($(this).html().replace(/Show/, 'Hide')); 
      } 
      // Do it afterwards as the operation is async 
      $("#thisclick").slideToggle("slow"); 
      if($("#example").attr("isHidden") == "1") 
        $("#example").slideToggle("slow"); 
      $("#example").attr("isHidden","1"); 
      }); 
     }); 
     })(jQuery); 
     </script>

来源

2013-04-01 12:31:02 Pabuc

你可以这样做：

$("#thisclick").click(function() { 
    if ($('#example').hasClass("hidden")) 
    { 
     $('#example').removeClass("hidden"); 
     $('#example').show(); 
    } 
    else 
    { 
     $('#example').addClass("hidden"); 
    } 
}

或更容易：

$("#thisclick").click(function() { 
    $('#example').toggleClass("hidden"); 
}

定义样式“：

.hidden 
{ display:none;}

来源

2013-04-01 12:33:22 Gerry

你是否期待像

<button>This click</button> 
<p style="display: none">Example</p> 

<script> 
$("button").click(function() { 
$("p").toggle(); 
}); 
</script>

请检查它http://jsfiddle.net/X5r8r/1107/

来源

2013-04-01 12:40:35 vinothini

如何让div隐藏onclick并在再次点击时显示它？

回答

相关问题