jQuery UI - 通过选择器隐藏和取消隐藏元素的交换功能答案

【问题标题】：jQuery UI - a swap function that hides and unhides elements by selectorjQuery UI - 通过选择器隐藏和取消隐藏元素的交换功能
【发布时间】：2008-12-30 18:31:12
【问题描述】：

前言：我在一个页面上包含了 jQuery 和 jQuery UI。

我已经定义了这个函数：

    function swap(sel) {
        if (1 == 1) {
           $(sel).hide('drop',{direction:'left'});
        }
    }

如何修复 (1 == 1) 部分以测试该元素是否已隐藏，如果隐藏则将其恢复。我确信这很容易，但我是 jQuery 新手。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

如果你不喜欢toggle，那么这可能会对你有所帮助：

function swap(sel) {
  if($(sel).is(':visible')) {
    $(sel).hide('drop',{direction:'left'});
  } else {
    $(sel).show('drop',{direction:'left'});
  }
}

【讨论】：

我喜欢 is(':visible')。相当光滑。

【解决方案2】：

为什么不使用toggle()？

例如：

function swap(sel) {
  $(sel).toggle();
}

【讨论】：

【解决方案3】：

也许$(sel).toggle(); 是您要找的？这是切换元素可见性的最佳方式。

【讨论】：

【解决方案4】：

正如其他回答者所说，toggle() 是最好的解决方案。但是，如果由于某种原因您不能/不想使用切换，并且您的选择器仅用于一个元素：

function swap(sel) {
    if ($(sel).is(':visible')) {  // Is this element visible?
       $(sel).hide('drop',{direction:'left'});
    }
}

警告：如果元素或其任何父元素是:hidden，:visible 检查将返回误报。如果这对您很重要，您可能需要check out this solution，它也会尝试检查其中的任何内容。

【讨论】：

虽然切换会产生效果吗？
AFAIK，唯一的切换效果是默认的，即淡入和同时增长，以及 slideToggle，它将内容从无高度向下滑动到全高。可以像任何 jQuery 动画一样配置速度。如果您不想要其中任何一个，则必须手动设置动画。