我有一个名为'info'的div,我想在点击一个按钮时显示它.
<button>Toggle</button>
<div id="toggle">
Test
</div>
基本上我想用jQuery用滑动功能来揭示它,但我不知道如何.我可以在网上找到大部分代码并看到片段,但我实际上并不知道在哪里放置大部分代码,有人可以告诉我我需要将相关的代码(从头开始)放到哪里和哪里得到这个工作？谢谢.
CSS
#toggle {
display: none
}
jQuery的
$(document).ready(function() {
$('button').on('click', function() {
$('#toggle').slideToggle();
});
});
一点解释:
$('button')是button标签的选择器.$('button').on('click',用于绑定点击事件button.
on()这里的第二个参数是回调处理程序,其中的代码将在单击后执行button.
$('#toggle')是divwith 的选择器id=toggle.
$('#toggle').slideToggle()将对div按钮单击进行滑动(上下)效果.
你应该在jQuery dom ready函数中执行你的代码.这是:
$(document).ready(function() {
// your code
})
简而言之
$(function() {
// your code
});
由于这些是JavaScript代码,因此您需要将它们放在<script>标记中.例如:
<script type="text/javascript">
$(document).ready(function() {
$('button').on('click', function() {
$('#toggle').slideToggle();
});
});
</script>
但是,如果您将此代码写入外部文件,则必须将该文件包含在<head>标记中,如下所示:
<script type="text/javascript" src="src_to_script"></script>
首次点击时按钮是否可以消失？
是的,可能.尝试如下:
$(document).ready(function() {
$('button').on('click', function() {
$(this).hide(); // disappear the button after first click
$('#toggle').slideToggle();
});
});