jquery - 如何使用 jquery 和 HTML 按钮隐藏/显示 div 内的所有内容？

Question

如何使用 HTML 按钮通过 jquery 隐藏 div 及其中的所有内容。

(注意 div 内容及其设置方式是完全必要的)

按钮:

<input id="button" type="button" value="Toggle" />

分区:

<div class="holder">
    <iframe class="frame"
            src="http://www.google.com/custom"
            data-url="http://www.google.com/custom?q="
            width="250"
            height="600" 
            onmouseover="width = 400" 
            onmouseout="width = 250">
    </iframe>
    <div class="sampleDiv">
        <a class="invisibleDiv" 
           id="http://www.google.com/custom?q=" 
           href="http://www.google.com/custom?q=" 
           target="Goog"></a>
    </div>
</div>

Javascript:

 function virtualSubmit(form) {
        var text = form.searchtext.value;
        var targets = document.getElementsByTagName('iframe'), items = targets.length;
        var targets2 = document.getElementsByClassName('invisibleDiv'), items2 =      targets2.length;

 for (var i = 0; i < items; i++) {
        var target = targets[i], url = target.getAttribute('data-url');
        }

 for (var i = 0; i < items2; i++) {
        var target = targets2[i], url = target.getAttribute('href');
         target.href = target.id + text;

  }
 return false;

 $(document).ready(function() {
 $("#button").click(function () {
    var holder= this.value;
      $(".holder").slideToggle().siblings().hide("slow");
    });

 });

fiddle 示例:http://jsfiddle.net/2xLNd/

Answer 1

使用 JQuery，您可以简单地做到这一点。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> $(document).ready(function()
        {
            $("#button").click(function()
            {
                  $(".holder").hide();
            });

        });</script>

如果你想隐藏和显示 div 那么你可以使用

<script> $(document).ready(function()
    {
        $("#button").click(function()
        {
              $(".holder").toggle();
        });

    });</script>