Question

我有一个名为'info'的div，我想在点击一个按钮时显示它。

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

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

Answer 1

的 CSS 的

#toggle { display: none }

的的jQuery 的

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

一点解释：

$('button')是button代码的选择器。

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

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

$('#toggle')是div 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(); }); });

Answer 2

您也可以这样做：

Here is jsFiddle to examine

$(document).ready(function() {
  $('button').bind('click', function() {
     if ($('#toggle').is(':visible')) {
       $('#toggle').hide();
     }else{
       $('#toggle').show();
     }
  });
});

Answer 3

enter link description here你可以试试这个：

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

如何使用jQuery隐藏和显示div

3 个答案:

注意

根据评论