无法使 jQuery 功能正常工作

Question

我正在尝试制作一个可以进出页面的 div，但是我无法使 jQuery 功能正常工作。

它在这里完美运行：

$('#toggle').toggle( 
function() {
    $('#popout').animate({ left: 0 }, 'slow', function() {
        $('#toggle').html('Close');
    });
}, 
function() {
    $('#popout').animate({ left: -40 }, 'slow', function() {
        $('#toggle').html('Show');
    });
}
);

<div id="popout">
<div id="toggle">Show</div>
<br style="clear: both" />
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>        
</ul>
</div>

#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray;  background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }

以下是我尝试实现该功能的方式：

<head>
<meta charset="UTF-8">
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#toggle').toggle(
                function() {
                $('#popout').animate({ left: 0 }, 'slow', function() {
                                     $('#toggle').html('Close');
                                     });
                },
                function() {
                $('#popout').animate({ left: -40 }, 'slow', function() {
                                     $('#toggle').html('Show');
                                     });
                }
                );

</script>
</head>

但是在我的页面上它不起作用。这是为什么？

Answer 1

这应该在

下给出的文档就绪函数中

$(document).ready(function(){

$('#toggle').toggle(
                function() {
                $('#popout').animate({ left: 0 }, 'slow', function() {
                                     $('#toggle').html('Close');
                                     });
                },
                function() {
                $('#popout').animate({ left: -40 }, 'slow', function() {
                                     $('#toggle').html('Show');
                                     });
                }
                );

});

Answer 2

$(document).ready(function(){   
  //your toggle code here <br/>
});

Answer 3

在 jquery 版本 1.9 之后删除了 toggle event。

您可以使用click event喜欢

var left = -40;
$('#toggle').click(function () {
    left = left == 0 ? -40 : 0;
    html = 'Show';
    if (left == 0) {
        html = 'Close';
    }
    $('#popout ').animate({
        left: left
    }, 'slow', function () {
        $('#toggle ').html(html);
    });
});

Demo

var left = -50;
$('#toggle').click(function () {
    left = left == 0 ? -50 : 0;
    html = 'Show';
    if (left == 0) {
        html = 'Close';
    }
    $('#popout ').animate({
        left: left
    }, 'slow', function () {
        $('#toggle ').html(html);
    });
});

#popout {
  position: fixed;
  height: 100px;
  width: 85px;
  border: 1px dotted gray;
  background: darkblue;
  color: white;
  top: 50px;
  left: -50px;
}
#toggle {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>

无法使 jQuery 功能正常工作

Can not get jQuery functions working

jquery

css

html