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，你需要在构建方法中使用jquery toggle（）

如果你想最初的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>

在下面丢失一个结束花括号返回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();
        });
 });

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

7 个答案: