jquery - 切换添加不显示？

Question

我正在尝试制作一个框，但是当单击列表项时，它会下降，然后在单击时返回。我之前已经这样做过很多次了，但由于某种原因，Jquery 添加了 display:none;

        $('li.item-162').toggle(function(){
                           $('.login').animate({
                                top: '27px'
                                 }, 1000);

                        },function() {          
                             $('.login').animate({
                                top: '-212px'
                                 }, 1000);
                        });

        $(".li.item-162").show();

在 Firebug 中我的代码显示 你可以在这里看到它。 http://rdhealthandsafety.co.uk/index.php

任何想法为什么会发生这种情况，我想这是我周二早上的忧郁:(

Answer 1

自 jQuery 1.8 起，您打算使用 .toggle() 函数的方式已被弃用，并在 jQuery 1.9中被删除强>.

Category: Deprecated 1.8:

.toggle() Bind two or more handlers to the matched elements, to be executed on alternate clicks.

这是在 Changes of Note in jQuery 1.9 中推理的:

This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.

尽管如此，Gaby aka G. Petrioli 创建了一个与 What to use instead of toggle(…) in jQuery > 1.8? 的答案相同的函数:

$.fn.toggleClick = function(){
    var methods = arguments, // store the passed arguments for future reference
        count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability
    return this.each(function(i, item){
        // for each element you bind to
        var index = 0; // create a local counter for that element
        $(item).click(function(){ // bind a click handler to that element
            return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element
            // the index % count means that we constrain our iterator between 0 and (count-1)
        });
    });
};

您可以像这样简单地使用它:

$('selector').toggleClick(function1, function2, […]);