Question

当有人点击右侧浮动的h1时，我想从左到右切换一个div，每个东西都工作得很好但是我无法切换它。一旦div出现，它就永远不会消失。

<script>
$(document).ready( function (){
        /*
        THIS COMMENTED SECTION IS WORKING BUT WITHOUT TOGGLE
        $('h1').click(function (e){
            e.preventDefault();
                $('div').animate({
                    'left': 0
                }, 'slow');

            });
        */



// This is not working!
$("h1").click(function(){
    $("div").toggle(function() {
        $("div").animate({'left': '-32%'});
    }, function() {
        $("div").animate({height: '0'});
    });
});



});
</script>

HTML：

<h1>Click here!</h1>
<div style="left: -32%; display: block;">Put whatever content you want here!
<ul>
    <li>CLICK ON THE LINK</li>
    <li>CLICK ON THE LINK</li>
    <li>CLICK ON THE LINK</li>
    <li>CLICK ON THE LINK</li>
</ul>
</div>

Answer 1

查看jquery文档：http://api.jquery.com/toggle/

.toggle( [duration ] [, complete ] )

第一个参数不是函数。

Answer 2

.toggle()的多功能参数形式已在jQuery 1.8中弃用，并在1.9中删除，它有一个内置的点击处理程序。因此，它没有按照您尝试使用它的方式工作，并且不再受支持。

这里是.toggle()的多功能版本的替代品：

jQuery.fn.cycleFunctions = function() {
    var args = Array.prototype.slice.call(arguments);
    // initialize index into function arguments
    var indexTag = "_cycleIndex";
    this.data(indexTag, 0);
    this.on("click", function(e) {
        var self = $(this);
        var index = self.data(indexTag) % args.length;
        self.data(indexTag, index + 1);
        return args[index].call(this, e);
    });
    return this;
};

注意，这已经为你做了.click()处理程序，所以你不要把它放在点击处理程序中。

所以，结合你的代码：

<h1>Click here!</h1>
<div class="toggle" style="left: -32%; display: block;">Put whatever content you want here!
<ul>
    <li>CLICK ON THE LINK</li>
    <li>CLICK ON THE LINK</li>
    <li>CLICK ON THE LINK</li>
    <li>CLICK ON THE LINK</li>
</ul>
</div>

// This works with two operations that are opposites of each other
// which your two animations are not
$("h1").cycleFunctions(function(){
    $(this).next(".toggle").slideUp();
}, function() {
    $(this).next(".toggle").slideDown();
});

然后你必须修复你的CSS，这两个动作是可逆的。要使用左侧样式移动，项目必须具有非默认位置样式设置。并且，一旦第二次点击发生且该项目的高度为零，该项目将永远不会再次可见，因此这可能会发生两次点击而且再也看不到了。

这是一个有效的演示：http://jsfiddle.net/jfriend00/Xj65L/

我的jQuery代码有什么问题？

2 个答案: