Question

我想将我的网站更新为jQuery 1.10，但我使用的函数已弃用toggle()。

我记得，我很难在第一时间使这个功能工作，它是否存在一个可以替换toggle()而不改变所有代码的函数。

我不是jQuery专家，我将不胜感激。

的CSS：

fieldset.collapsed * {
    display: none;
}

fieldset.collapsed h2, fieldset.collapsed {
    display: block !important;
}

fieldset.collapsed h2 {
    background-image: url(../img/nav-bg.gif);
    background-position: bottom left;
    color: #999;
}

fieldset.collapsed .collapse-toggle {
    background: transparent;
    display: inline !important;
}

jquery的：

var sPath=window.location.pathname;
(function ($) {
    $(document).ready(function () {     
        function show () { // Show
            $(this).text(gettext("Hide"))
                .closest("fieldset")
                .removeClass("collapsed")
                .trigger("show.fieldset", [$(this).attr("id")]);
            window.localStorage.setItem($(this).attr("id"), true);
        }
        function hide () { // Hide
            $(this).text(gettext("Show"))
                .closest("fieldset")
                .addClass("collapsed")
                .trigger("hide.fieldset", [$(this).attr("id")]);
            window.localStorage.removeItem($(this).attr("id"))
            return false;
        }
        // Add anchor tag for Show/Hide link
        $("fieldset.collapse").each(function (i, elem) {
            // Don't hide if fields in this fieldset have errors
            key = 'fieldsetcollapser' + i + sPath;
            if (typeof (window.localStorage) != 'undefined') {
                var item = $(elem)
                .addClass("collapsed")
                .find("h2")
                .first()
                .append(' (<a id=' +
                        key +
                        ' " class="collapse-toggle" href="#">' +
                        gettext("Show") +
                        '</a>)'
                ).find('a');
                if (window.localStorage.getItem(key)) {
                    //alert('show')
                    show.apply(item);
                    $(item).toggle(hide, show);
                }else {
                    if ($("ul.errorlist").length >0) {
                      //alert('yo show')
                      show.apply(item);
                      $(item).toggle(hide, show);
                  }else{
                     $(item).toggle(show, hide);
                     //alert("hide")
                }
                }

            } else {
                throw "window.localStorage, not defined";
            }
        });
    });

已编辑： See how it works here（使用jQuery 1.6）

Answer 1

弃用.toggle（）函数的原因是因为这样的混乱！

正在发生的事情是您的代码正在（交替地）调用您自己的内部“隐藏”和“显示”功能。 .toggle(hide,show)电话会为您解决此问题。

但是，在hide（）和show（）函数内部，您实际上并不是隐藏或显示任何内容。你正在做的是添加或删除一个类，它可能隐藏或显示某些内容。

解决方案

选择性地调用这两个函数的唯一解决方案是每次调用其中一个函数时更改“click”事件。

在show（）代码的底部，您需要添加：

$(this).one("click", hide);

在hide（）代码的底部，您需要添加：

$(this).one("click", show);

最后，您需要使用以下调用替换对.toggle（）的调用：

$(item).one("click", hide); // replaces $(item).toggle(hide,show);
$(item).one("click", show); // replaces $(item).toggle(show,hide);

为什么不.is（“：可见”）？

很简单，您要添加/删除的类是“折叠”类。这个类实际上并不隐藏 $（item）。因此，$（this）.is（“：visible”）将始终为真！

显然，这不起作用。

以下是一个说明点的演示：JSFiddle

完全使用代码

对于那些喜欢阅读代码而不是单词的人：

function firstEvent() {   // e.g. "hide"
    //First event code
    $(item).one("click", secondEvent); 
}
function secondEvent() {  // e.g. "show"
    //Second event code
    $(item).one("click", firstEvent); 
}

$(item).one("click", firstEvent); // replaces $(item).toggle(firstEvent, secondEvent);

Answer 2

我会用if语句替换你的实例

$(item).click(function(){
  if ($(this).is(':visible')) {
       $(this).hide();
    }
    else {
        $(this).show();
    }
});

以上是使用p元素和img工作的上述代码的演示。

DEMO http://jsfiddle.net/kevinPHPkevin/8TFFx/

您也可以使用CSS / Jquery

来完成

$('p').click(function(){
  if ($('img').is(':visible')) {
       $('img').css("display","none");
    }
    else {
        $('img').css("display","block");
    }
});

jQuery - 使用不推荐的toggle（）更新函数

2 个答案: