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

Question

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

（注意 div 的内容和它们的设置方式是完全必要的）

按钮：

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

div：

<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");
    });

 });

小提琴示例：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>

Answer 2

试试这个http://jsfiddle.net/2xLNd/4/

您已在函数中准备好文档。将其置于函数范围之外。

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

你的函数应该在 document.ready 被调用之前结束。

Answer 3

您可以在 jQuery 中使用以下代码。

$("#button").click(function () {
    $(".holder").toggle();
});

例如Check here

更新：看看你的代码，你可以试试这个。

$("#button").click(function () {
var holder= this.value;
  $(".holder").toggle("slideUp");
});

});

只需删除兄弟姐妹（）。而且您的功能未正确关闭。检查上面的链接。

查看here

Answer 4

您可以简单地通过$(".holder").hide() 使 div 不可见，$(".holder").show() 使 div 再次可见。

Answer 5

为了显示/隐藏特定的 DIV，您需要在内置方法 toggle() 中使用 jquery

如果您希望最初 Holder div 不显示，那么

<div class="holder" style="display:none;">
    <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>

就像你的情况一样，如果你想隐藏/显示一个 div，那么你只需使用

$('#button').click(function() {

    $(".holder").toggle();      

});

Answer 6

大家试试这个

<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>

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

<script>
 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;
}
$("#button").click(function () {
    $(".holder").toggle(); 

    });



</script>

return false 下面缺少一个右花括号。

Answer 7

亲爱的朋友，这个链接对你有用...demo_Click_hear

嗨，亲爱的，请添加 jquery-1.8.3 添加库 ..........

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 () {
        $("div.holder").toggle();
        });
 });