如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?

如果元素可见或隐藏, 我如何测试 ?


当前回答

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

api 文档: 可见选择器

其他回答

您可以在显示或隐藏 cs 类时,通过切换该类来使用该 Cs 类 :

.show{ display :block; }

设置您的 jquery toggle类 () 或添加类 () 或删除类 () 。

举个例子,

jquery (' myid'. 切换类 ('show')

当元素没有显示时, 上面的代码会添加显示 cs 类, 而当元素显示类别时, 将会删除 。

当你在检查它是否可见时, 你可以遵循这个拼字码,

jquery ('mid'.) 有类('show');

上面的代码将返回一个布尔, 当 Myid 元素含有我们的类( show) , 而当它没有( show) 类( show) 时则返回一个布尔 。

但如果元素的 css 和下面一样呢?

.element{
    position: absolute;left:-9999;    
}

因此,对于堆叠溢出问题的答案是,如何检查元素是否在屏幕之外,也应当考虑。

这对我来说是有效的,我用表演和隐藏来使我的 div 隐藏/可见:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

元素能见度和支流如何运作;

可用下列显示方式隐藏元素: 无、 可见度: 隐藏或不透明: 0。 这些方法之间的差异 :

显示: 没有隐藏元素, 它不占用任何空间; 可见性: 隐藏元素, 但是它仍然在布局中占据空间; 透明性: 0 将元素隐藏为“ 可见性: 隐藏 ” , 它仍然在布局中占据空间; 唯一不同之处在于不透明让元素部分透明; 如果 $ ('. target') , 是 (': hidden' ) {( $ ('. target'. show (); ) 其它 { ($ ('. target'. hide ()); } 如果 ($ ('. target') ) { $ ('. target'). hide (); 其它 { ( $ (' 目标) 。

只需检查该元素是否可见, 并返回一个布尔。 jquery 通过在元素中添加无显示来隐藏元素, 所以如果您想要使用纯正的 javascript, 您仍然可以这样做, 例如 :

if (document.getElementById("element").style.display === 'block') {
  // Your element is visible; do whatever you'd like
}

您也可以使用jquery, 因为您的代码的其余部分似乎使用这个代码, 而您有小块代码。 类似在jquery的下面的东西, 也为您玩同样的把戏:

if ($(element).is(":visible")) {
    // Your element is visible, do whatever you'd like
};

使用 cs 方法在 jquery 中也可以产生同样的结果 :

if ($(element).css('display') === 'block') {
    // Your element is visible, do whatever you'd like
}

在检查能见度和显示情况时,您还可以做以下工作:

if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
   // Your element is visible, do whatever you'd like
}