隐藏文本被点击

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>