如何隐藏 HTML 文本直到被点击

Question

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

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

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

作为常规切换效果很好，但是这会将文本留在那里，直到第一次单击为止。

代码笔：https://codepen.io/anon/pen/bYYeEB

Answer 1

$(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了。

Answer 2

jQuery show、hide 和 toggle 函数只是将 CSS display 属性更改为具有display: block; 或 display: none;.

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

Answer 3

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

如何隐藏 HTML 文本直到被点击

How to make HTML text hidden until clicked on

html

javascript

css

jquery

twitter-bootstrap-4