1

我有一个名为“信息”的 div，我希望在单击按钮时显示它。

<button>Toggle</button>
<div id="toggle">
Test
</div>

基本上我想使用 jQuery 来显示它的滑动功能，但我不知道如何。我可以在网上找到大部分代码并查看代码片段，但我实际上并不知道将大部分代码放在哪里，有人可以指导我了解我需要将相关代码（从头开始）放在什么地方和什么地方得到这个工作？谢谢你。

4

3 回答 3

6

CSS

#toggle {
  display: none
}

jQuery

$(document).ready(function() {
   $('button').on('click', function() {
     $('#toggle').slideToggle();
   });
});

一点解释：

  • $('button')是button标签的选择器。

  • $('button').on('click',用于将点击事件绑定到button.

  • 这里的第二个参数on()是回调处理程序，其中的代码将在点击后执行button。

  • $('#toggle')div是with的选择器id=toggle。

  • $('#toggle').slideToggle()div将在单击按钮时产生滑动（上下）效果。

笔记

您应该在 jQuery dom 就绪函数中编写代码。这就像：

$(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();
   });
});
于 2012-08-14T12:07:43.727 回答
1

你也可以这样做：

这是要检查的jsFiddle

$(document).ready(function() {
  $('button').bind('click', function() {
     if ($('#toggle').is(':visible')) {
       $('#toggle').hide();
     }else{
       $('#toggle').show();
     }
  });
});
于 2012-08-14T12:10:02.897 回答
1

在此处输入链接描述您可以试试这个：

$(document).ready(function(){
    $('div#toggle').hide();
    $('button').on('click', function(){
       $('#toggle').slideToggle();                    
    });
});
于 2012-08-14T12:21:28.940 回答