jQuery是否有除了.toggle()之外的替代方法？

Question

目前根据Jquery的官网，.toggle()在1.8版本后已被弃用。那么，是否有替代方案来代替.toggle()呢？因为我需要在菜单应用程序中使用该函数，以便根据按钮点击隐藏和显示div内容。

我已经根据JSFiddle完成了任务，但我已经在我的网站上加载了1.12.4版本的jquery用于其他用途。

我的Js函数代码：

function hideToggle(button, elem) {

  $(button).toggle(
    function() {
      $(elem).hide();
    },
    function() {
      $(elem).show();
    }  );
}

hideToggle(".button1", ".iframe1");

那么有没有办法防止加载两个版本的jquery呢？

- Darsh kotecha

---

从您链接的页面上：".toggle()方法是为方便而提供的。通过手动实现相同的行为相对来说是很简单的。" - freedomn-m

Answer 1

这基本上就是 hide 和 show 所做的事情。

CSS

.hidden {
 display:none;
 /* you could also use !important here */
}

JQuery

  $('#someElement').toggleClass('hidden');

- bassxzero

Answer 2

他们似乎没有用等效的方法替换它。但是，您可以这样做：

$(button).on('click', function() {
    if ($(elem).is(':visible') { // if $(elem) is visible
        $(elem).hide(); / hide it
    } else { // if not
        $(elem).show(); // show it
    }

- DevlshOne

---

如果它不在DOM中，你会如何展示它？ - Gabriele Petrioli

Answer 3

奇怪的是，这个问题的简单解决方案是一个不同的 toggle函数。该函数切换元素的显示。

您的函数可以简化为：

function hideToggle(button, elem) {
  $(button).click(
    function() {
      $(elem).toggle();
    }
  );
}

- lonesomeday

Answer 4

你可以在点击时调用.toggle()来实现完全相同的效果：

$(".button1").click(function() { $(".iframe1").toggle();});
$(".button2").click(function() { $(".iframe2").toggle();});

更新的示例代码：https://jsfiddle.net/6g3cko1h/3/，其中包括您的实用工具样式设置方法的更新版本：

function hideToggle(button, elem)
{
    $(button).click(function() { $(elem).toggle(); })
}

- freedomn-m

---

成千上万的解决方案中至少有一个可行！谢谢！ - Darius

Answer 5

你没有正确理解哪些内容已被弃用。toggle函数是有效的。 它可以“显示或隐藏匹配的元素”。

toggle的当前文档为 - http://api.jquery.com/toggle/

因此

$('button').toggle()

如果元素是可见的，则隐藏它；如果元素是隐藏的，则显示它。

- knaos

---

抱歉，但是 OP 明显在使用 $(button).toggle(function...) 这个已经过时的 toggle 函数，并且正在寻找一种替代方案。你在这里所声称的 其他 toggle 函数并没有被弃用。 - freedomn-m

我同意。我认为@lonesomeday的答案是最好的。 - knaos