单击按钮之前隐藏文本

Question

我设法在按钮上做了一个小的滑动功能，可以在这里看到： JSfiddle

我唯一的问题是，现在开始显示文本。 文本应隐藏，直到您单击按钮。 有人可以给我提示如何解决这个问题吗？

html

 <h3>
  This text should be hidden before you click the button
</h3>
<button>Toggle Me</button>

JS

$( "button" ).click(function() {
  $( "h3" ).slideToggle( "slow" );
});

Answer 1

您需要在开始时用样式属性隐藏H3。

<h3 style="display: none">his text should be hidden before you click the button</h3>

https://jsfiddle.net/uj47sgLj/3/

Answer 2

您可以轻松地在<h3>元素上应用内联样式属性（使用display: none ）将其隐藏：

<h3 style='display: none'>
  This text should be hidden before you click the button
</h3>

如果您打算将其用于多个元素，则更好的方法是定义一个CSS类，将其隐藏起来，然后将该类应用于元素：

<style>
    .hidden { display: none; }
</style>
<h3 class='hidden'>
  This text should be hidden before you click the button
</h3>

例

 $("button").click(function() { $("h3").slideToggle("slow"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 style='display: none'> This text should be hidden before you click the button </h3> <button>Toggle Me</button>