2

我想将我的网站更新为 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";
            }
        });
    });

已编辑：在这里查看它是如何工作的（使用 jQuery 1.6）

4

2 回答 2

3

.toggle() 函数被弃用的原因就是因为这样的混乱！

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

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

解决方案

交替调用这两个函数的唯一解决方案是每次调用其中一个函数时更改“点击”事件。

在 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(":visible")？

很简单，您要添加/删除的类是“折叠”类。这个类实际上并没有隐藏$(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);
于 2013-08-23T17:47:00.680 回答
0

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

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

这是我使用p元素和img.

演示http://jsfiddle.net/kevinPHPkevin/8TFFx/

您也可以使用 CSS/Jquery

$('p').click(function(){
  if ($('img').is(':visible')) {
       $('img').css("display","none");
    }
    else {
        $('img').css("display","block");
    }
});
于 2013-08-23T17:34:10.157 回答