在单击按钮之前隐藏文本

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

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

<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>

示例

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;