jQuery和CSS -删除/添加显示:无

时间：2022-03-16 09:55:03

I have a div with this class :

我有一个这类的div:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

And I'd like with some jQuery methods remove that display:none; (so the div will showed) and than add it again (so the div will shadow).

我想用一些jQuery方法删除显示:none;(div会显示出来)然后再次添加(div会显示阴影)。

How can I do it? Cheers

我该怎么做呢?干杯

12 个解决方案

#1

136  

To hide the div

隐藏的div

$('.news').hide();

or

或

$('.news').css('display','none');

and to show the div:

并显示div:

$('.news').show();

or

或

$('.news').css('display','block');

#2

67  

jQuery provides you with:

jQuery提供:

$(".news").hide();
$(".news").show();

You can then easily show and hide the element(s).

然后可以轻松地显示和隐藏元素。

#3

14  

In JavaScript:

在JavaScript中:

getElementById("id").style.display = null;

In jQuery:

jQuery:

$("#id").css("display","");

#4

12  

So, let me give you sample code:

让我给你们一些样本代码:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

The link will be the trigger to show the div when clicked. So your Javascript will be:

该链接将是单击时显示div的触发器。你的Javascript会是:

$('.trigger').click(function() {
   $('.news').toggle();
});

You're almost always better off letting jQuery handle the styling for hiding and showing elements.

您几乎总是最好让jQuery处理隐藏和显示元素的样式。

Edit: I see people above are recommending using .show and .hide for this. .toggle allows you to do both with just one effect. So that's cool.

编辑:我看到上面的人推荐使用。show和。hide。toggle允许你同时使用一个效果。这就是酷。

#5

9  

Use toggle to show and hide.

使用切换显示和隐藏。

$('#mydiv').toggle()

Check working example at http://jsfiddle.net/jNqTa/

#6

7  

i'd suggest adding a class to display/hide elements:

我建议添加一个类来显示/隐藏元素:

.hide { display:none; }

and then use jquery's .toggleClass() to show/hide the element:

然后使用jquery的.toggleClass()来显示/隐藏元素:

$(".news").toggleClass("hide");

#7

6  

jQuery's .show() and .hide() functions are probably your best bet.

jQuery的.show()和.hide()函数可能是最好的选择。

#8

6  

The only way to remove an inline "display:none" via jQuery's css-api is by resetting it with the empty string (null does NOT work btw!!).

通过jQuery的css-api删除内联“display:none”的唯一方法是使用空字符串重新设置它(null不工作!)

According to the jQuery docu this is the general way to "remove" a once set inline style property.

根据jQuery文档，这是“删除”曾经设置的内联样式属性的一般方法。

$("#mydiv").css("display","");

$(" # mydiv "). css(“显示”、“);

or

或

$("#mydiv").css({display:""});

$(" # mydiv "). css({显示:" });

should do the trick properly.

应该用正确的方法。

IMHO there is a method missing in jQuery that could be called "unhide" or "reveal" which instead of just setting another inline style property unsets the display value properly as described above. Or maybe hide() should store the initial inline value and show() should restore that...

在jQuery中缺少一个方法，可以称为“unhide”或“reveal”，而不是像上面描述的那样设置另一个内联样式属性来正确地取消显示值。或者隐藏()应该存储初始的内联值，show()应该恢复…

#9

5  

You're not giving us much information but in general this might be a solution:

你没有给我们提供太多的信息，但总的来说，这可能是一个解决方案:

$("div.news").css("display", "block");

#10

4  

For some reason, toggle didn't work me and received error:"uncaught typeerror toggle is not a function". on inspect element in browser. So i used the following code and it started working for me.

由于某些原因，toggle没有工作，并且收到错误:“uncaught typeerror toggle不是函数”。在浏览器中检查元素。所以我使用了下面的代码，它开始为我工作。

$(".trigger").click(function () { $('.news').attr('style', 'display:none'); }

$(" .trigger”)。点击(函数(){ $(“格式”)。attr(“风格”,“显示:没有”);}

Used jquery script file with version: 'jquery-2.1.3.min.js".

使用jquery脚本文件，版本:'jquery-2.1.3.min.js '。

#11

3  

If you have a lot of elements you would like to .hide() or .show(), you are going to waste a lot of resources to do what you want - even if use .hide(0) or .show(0) - the 0 parameter is the duration of the animation.

如果您有很多想要.hide()或.show()的元素，那么您将浪费大量资源来做您想做的事情—即使使用.hide(0)或.show(0)—0参数是动画的持续时间。

As opposed to Prototype.js .hide() and .show() methods which only used to manipulate the display attribute of the element, jQuery's implementation is more complex and not recommended for a large number of elements.

而不是原型。js .hide()和.show()方法只用于操作元素的显示属性，jQuery的实现更复杂，不建议用于大量的元素。

In this cases you should probably try .css('display','none') to hide and .css('display','') to show

在这种情况下，您应该尝试使用.css('display'，'none')来隐藏和.css('display'， ")来显示

.css('display','block') should be avoided, especially if you're working with inline elements, table rows (actually any table elements) etc.

.css('display'，'block')应该被避免，特别是如果您使用的是内联元素、表行(实际上是任何表元素)等等。

#12

1  

Considering lolesque's comment to best answer you can add either an attribute or a class to show/hide elements with display properties that differs from what it normally has, if your site needs backwards compatibility I would suggest making a class and adding/removing it to show/display the element

考虑到lolesque的最佳回答，您可以添加一个属性或一个类来显示/隐藏元素，显示属性与通常的不同，如果您的站点需要向后兼容，我建议您创建一个类并添加/删除它以显示/显示元素

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Replace inline-block with your preferred display method of your choice and use jquerys addclass https://api.jquery.com/addclass/ and removeclass https://api.jquery.com/removeclass/ instead of show/hide, if backwards compatibility is no problem you can use attributes like this.

使用您所选择的首选显示方法替换inline块，并使用jquerys addclass https://api.jquery.com/addclass/和removeclass https://api.jquery.com/removeclass/而不是show/hide，如果向后兼容没有问题，您可以使用这样的属性。

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

And use jquerys attr() http://api.jquery.com/attr/ to show and hide the element.

并使用jquerys attr() http://api.jquery.com/attr/来显示和隐藏元素。

Whichever method you prefer it makes you able to easily implement css3 animations when showing/hiding elements this way

不管你喜欢哪种方法，当你用这种方式显示/隐藏元素时，你都可以轻松地实现css3动画

#1

136  

To hide the div

隐藏的div

$('.news').hide();

or

或

$('.news').css('display','none');

and to show the div:

并显示div:

$('.news').show();

or

或

$('.news').css('display','block');

#2

67  

jQuery provides you with:

jQuery提供:

$(".news").hide();
$(".news").show();

You can then easily show and hide the element(s).

然后可以轻松地显示和隐藏元素。

#3

14  

In JavaScript:

在JavaScript中:

getElementById("id").style.display = null;

In jQuery:

jQuery:

$("#id").css("display","");

#4

12  

So, let me give you sample code:

让我给你们一些样本代码:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

The link will be the trigger to show the div when clicked. So your Javascript will be:

该链接将是单击时显示div的触发器。你的Javascript会是:

$('.trigger').click(function() {
   $('.news').toggle();
});

You're almost always better off letting jQuery handle the styling for hiding and showing elements.

您几乎总是最好让jQuery处理隐藏和显示元素的样式。

Edit: I see people above are recommending using .show and .hide for this. .toggle allows you to do both with just one effect. So that's cool.

编辑:我看到上面的人推荐使用。show和。hide。toggle允许你同时使用一个效果。这就是酷。

#5

9  

Use toggle to show and hide.

使用切换显示和隐藏。

$('#mydiv').toggle()

Check working example at http://jsfiddle.net/jNqTa/

#6

7  

i'd suggest adding a class to display/hide elements:

我建议添加一个类来显示/隐藏元素:

.hide { display:none; }

and then use jquery's .toggleClass() to show/hide the element:

然后使用jquery的.toggleClass()来显示/隐藏元素:

$(".news").toggleClass("hide");

#7

6  

jQuery's .show() and .hide() functions are probably your best bet.

jQuery的.show()和.hide()函数可能是最好的选择。

#8

6  

The only way to remove an inline "display:none" via jQuery's css-api is by resetting it with the empty string (null does NOT work btw!!).

通过jQuery的css-api删除内联“display:none”的唯一方法是使用空字符串重新设置它(null不工作!)

According to the jQuery docu this is the general way to "remove" a once set inline style property.

根据jQuery文档，这是“删除”曾经设置的内联样式属性的一般方法。

$("#mydiv").css("display","");

$(" # mydiv "). css(“显示”、“);

or

或

$("#mydiv").css({display:""});

$(" # mydiv "). css({显示:" });

should do the trick properly.

应该用正确的方法。

IMHO there is a method missing in jQuery that could be called "unhide" or "reveal" which instead of just setting another inline style property unsets the display value properly as described above. Or maybe hide() should store the initial inline value and show() should restore that...

在jQuery中缺少一个方法，可以称为“unhide”或“reveal”，而不是像上面描述的那样设置另一个内联样式属性来正确地取消显示值。或者隐藏()应该存储初始的内联值，show()应该恢复…

#9

5  

You're not giving us much information but in general this might be a solution:

你没有给我们提供太多的信息，但总的来说，这可能是一个解决方案:

$("div.news").css("display", "block");

#10

4  

For some reason, toggle didn't work me and received error:"uncaught typeerror toggle is not a function". on inspect element in browser. So i used the following code and it started working for me.

由于某些原因，toggle没有工作，并且收到错误:“uncaught typeerror toggle不是函数”。在浏览器中检查元素。所以我使用了下面的代码，它开始为我工作。

$(".trigger").click(function () { $('.news').attr('style', 'display:none'); }

$(" .trigger”)。点击(函数(){ $(“格式”)。attr(“风格”,“显示:没有”);}

Used jquery script file with version: 'jquery-2.1.3.min.js".

使用jquery脚本文件，版本:'jquery-2.1.3.min.js '。

#11

3  

If you have a lot of elements you would like to .hide() or .show(), you are going to waste a lot of resources to do what you want - even if use .hide(0) or .show(0) - the 0 parameter is the duration of the animation.

如果您有很多想要.hide()或.show()的元素，那么您将浪费大量资源来做您想做的事情—即使使用.hide(0)或.show(0)—0参数是动画的持续时间。

As opposed to Prototype.js .hide() and .show() methods which only used to manipulate the display attribute of the element, jQuery's implementation is more complex and not recommended for a large number of elements.

而不是原型。js .hide()和.show()方法只用于操作元素的显示属性，jQuery的实现更复杂，不建议用于大量的元素。

In this cases you should probably try .css('display','none') to hide and .css('display','') to show

在这种情况下，您应该尝试使用.css('display'，'none')来隐藏和.css('display'， ")来显示

.css('display','block') should be avoided, especially if you're working with inline elements, table rows (actually any table elements) etc.

.css('display'，'block')应该被避免，特别是如果您使用的是内联元素、表行(实际上是任何表元素)等等。

#12

1  

Considering lolesque's comment to best answer you can add either an attribute or a class to show/hide elements with display properties that differs from what it normally has, if your site needs backwards compatibility I would suggest making a class and adding/removing it to show/display the element

考虑到lolesque的最佳回答，您可以添加一个属性或一个类来显示/隐藏元素，显示属性与通常的不同，如果您的站点需要向后兼容，我建议您创建一个类并添加/删除它以显示/显示元素

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Replace inline-block with your preferred display method of your choice and use jquerys addclass https://api.jquery.com/addclass/ and removeclass https://api.jquery.com/removeclass/ instead of show/hide, if backwards compatibility is no problem you can use attributes like this.

使用您所选择的首选显示方法替换inline块，并使用jquerys addclass https://api.jquery.com/addclass/和removeclass https://api.jquery.com/removeclass/而不是show/hide，如果向后兼容没有问题，您可以使用这样的属性。

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

And use jquerys attr() http://api.jquery.com/attr/ to show and hide the element.

并使用jquerys attr() http://api.jquery.com/attr/来显示和隐藏元素。

Whichever method you prefer it makes you able to easily implement css3 animations when showing/hiding elements this way

不管你喜欢哪种方法，当你用这种方式显示/隐藏元素时，你都可以轻松地实现css3动画

标签：

相关文章