如何在点击之前隐藏 HTML 文本答案

【问题标题】：How to make HTML text hidden until clicked on如何在点击之前隐藏 HTML 文本
【发布时间】：2017-11-17 11:04:29
【问题描述】：

我正在尝试学习如何使用 jQuery 进行 HTML 文本切换，这本身非常简单，但我希望文本自动隐藏，直到使用按钮单击它。我已经查过了，我找不到如何做到这一点。我觉得应该很简单，我有这部分

<h4 id="text1">This is some toggleable text</h4>

$(document).ready(function(){
    $("#button1").click(function(){
      $("#text1").toggle();
    });
});

作为常规切换可以正常工作，但这会将文本保留在那里，直到第一次点击。

Codepen：https://codepen.io/anon/pen/bYYeEB

【问题讨论】：

您只需将display: none css 添加到您的#text1 或您最初想要隐藏的任何其他文本中。 #text1 { display: none; }

标签： javascript jquery html css twitter-bootstrap-4

【解决方案1】：

jQuery show、hide 和 toggle 函数只需将 CSS 的 display 属性更改为 display: block; 或 display: none;。

要从隐藏元素开始，只需设置样式属性style="display:none;"。

【讨论】：

或添加到css #text1 { display: none; }

【解决方案2】：

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

function toggle() {
  $("#text1").toggle();
}

toggle();

在底部调用toggle 将自动隐藏该元素。这仍然不是最大的，因为在此代码运行之前元素将显示。

但您始终可以将 HTML 更改为如下所示：

<h4 id="text1" style="display:none">This is some toggleable text</h4>

那你就不用第一次打电话给toggle了。

【讨论】：

【解决方案3】：

<script>
  $(document).ready(function() {
  $("#text1").css("display", "none");//you just have to add this line 
  $("#button1").click(function() {
  $("#text1").toggle();
 });
});
</script>

【讨论】：