Question

我最后有一个带按钮的div。我希望当有人按下那个按钮时，另一个div（在前一个下面）应该出现我把它放在div中的内容。

我使用以下代码：

HTML：

<div>
    <a id="button" href="#">REGISTER</a>
</div>
<br>
<br>
<div id="item">
    <iframe src="some source" embedded=true" width="760" height="550" frameborder="0" marginheight="0" marginwidth="0">Loading</iframe>
</div>

和jquery with script：

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

我遇到的问题是第二个div最初出现在页面加载本身上，当我点击按钮时它就消失了。我该怎么办？

Answer 1

HTML5可让您使用详细信息标记轻松完成。

<details>
    <summary>Click to toggle division</summary>
    <p>Here you can put some content...</p>
    <p>... and anything else you want :)</p>
</details>

以下是演示：https://jsfiddle.net/3wqyyf7m/

Answer 2

如果您希望在首次加载时隐藏元素，则可以使用hidden属性;

<div id="item" hidden>...</div>

演示：http://jsfiddle.net/xztwnp7f/1/

阅读详情：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden

这是一个相对较新的属性，因此如果您需要支持旧浏览器，可以将其放入css中以使其正常工作;

*[hidden] { display: none; }

来源：http://davidwalsh.name/html5-hidden

Answer 3

试试这个：

div {
  box-shadow:inset 0 0 10px white, inset 0 0 15px gray;
  display:table;/* or inline-block/inline-table */
  overflow:hidden;/* clip content */
  border-radius:0  20% 20% 0 /80%;/* cut off basic border-radius */
  position:relative;/* bring at front so img doesn't fade behind body */
}
img {
  display:block;/* gap underneath .. or vertical-align:top/bottom */
  position:relative;
  z-index:-1;/* let inset shadow of parent lay over it */
}
body {
  background:brown
}

JSFiddle

Answer 4

将toggle（）更改为show（）
show（）属性仅显示div。当您再次单击按钮时，它不会再次隐藏div。

Answer 5

我认为这就是你想要做的事情：

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

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

从http://api.jquery.com/toggle/

复制粘贴

Answer 6

首先，您错过了"

上的embedded=true"

您可以通过多种方式使用JQuery执行此操作;我已将display: none添加到iframe的CSS中，而不是添加style元素。

#regFrame{
    display: none;
}

<div>
    <a id="button" href="#">REGISTER</a>
</div>
<br>
<br>
<div id="item">
    <iframe id="regFrame" src="http://placekitten.com/g/760/550" embedded="true" width="760" height="550" frameborder="0" marginheight="0" marginwidth="0">
        Loading
    </iframe>
</div>

$('#button').click(function(){
    //$('#regFrame').show();
    //$('#regFrame').toggle(); //To hide the iframe when the button is clicked again
    //$('#regFrame').show(500); //To fade in the iframe
    $('#regFrame').toggle(500); //To fade the iframe in and out
});

请参阅JSFiddle

Answer 7

创建html div

 function showhide()
{
   var div = document.getElementById(&ldquo;newpost");

if (div.style.display !== "none") {

div.style.display = "none";

}

else {

div.style.display = "block";

}

 }

此div将在按钮单击时显示和隐藏

    <button id="button" onclick="showhide()">Click Me</button>

Answer 8

您可以轻松地从头开始创建类似details的内容：

document.querySelectorAll('div.details').forEach(function(div) {
  div.querySelectorAll('span.handle').forEach(function(span) {
    span.addEventListener('click', function (event) {
      if (div.dataset.expanded == 'true')
        div.dataset.expanded = 'false';
      else
        div.dataset.expanded = 'true';
    });
  });
});

div.details > span.handle:after {
  pointer-events: all;
}

div.details[data-expanded="true"] > span.handle:after {
  content: '▼';
}

div.details[data-expanded="false"] > span.handle:after {
  content: '►';
}

div.details[data-expanded="true"] > div.body {
  display: table;
}

div.details[data-expanded="false"] > div.body {
  display: none;
}

<div class="details" data-expanded="false">
  <span class="handle"></span>
  <span class="summary">Hello World!</span>
  <div class="body">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua.
  </div>
</div>

HTML5，div，隐藏，点击显示

8 个答案: