Question

我有一个＆＃34;什么是新的＆＃34;我的网站上的页面，我希望用户能够使用按钮/ href链接文本隐藏和显示帖子。该代码已编辑到下面的帖子中。

HTML：

<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>

JavaScript的：

function toggleVis() {
    var x = document.getElementById("post-container");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

CSS：

.visi {
    width:auto;
    -webkit-border-radius:10px;
    height:auto;
    background-color:#79E119;
    border:5px solid #FFFFFF;
}

Answer 1

使用<div>元素围绕整个博文，并在用户点击相关链接或按钮时使用jQuery's .toggle() function显示和隐藏它。

HTML：

<div id="clickme">
  Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>

使用Javascript：

$( "#clickme" ).click(function() {
  $( "#blogpost" ).toggle( "slow", function() {
    // Animation complete.
  });
});

如何制作一个可关闭的博客文章

1 个答案: