如何将jquery.thoggle()更改为使用display:table单元格
How to change jquery .toggle() to use display:table-cell?
我正在使用jquery.thoggle()在页面加载时显示display:none的页面上的div。然而,在默认设置下,jquery插入display:block,我希望在其中显示:表格单元格。我怎样才能做到这一点?到目前为止我的尝试:
<div class="mydiv" style"display:none">test</div>
.mydiv {
display:table-cell;
}
$("a#showdiv").click(function() {
$(".mydiv").toggle();
使用.toggleClass()
并使用css进行样式设置。。
html
<div class="mydiv table-hidden">test</div>
css
.mydiv {
display:table-cell;
}
.mydiv.table-hidden{
display:none;
}
jquery
$("a#showdiv").click(function() {
$(".mydiv").toggleClass('table-hidden');
}
使用CSS进行样式设置@Gaby aka G.Petrioli或在jQuery中使用.css()
方法。
HTML
<div class="mydiv">test</div>
jQuery
$("a#showdiv").click(function() {
if($(".mydiv").css("display") == "none"){
$(".mydiv").css("display", "table-cell");
} else {
$(".mydiv").css("display", "none");
}
});
您所拥有的应该已经工作了。
在jQuery中,除非元素的样式属性最初将display
设置为none
以外的其他内容,否则当调用show
时,它所做的只是移除样式属性以进行显示。它不会阻碍它。
你可以在这个小提琴中看到,当点击按钮时,CSS中设置的display
就是元素的设置
以下是jQuery中的相关代码来源:
function showHide( elements, show ) {
var display, elem, hidden,
values = [],
index = 0,
length = elements.length;
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
values[ index ] = data_priv.get( elem, "olddisplay" );
display = elem.style.display;
if ( show ) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if ( !values[ index ] && display === "none" ) {
elem.style.display = "";
}
// Set elements which have been overridden with display: none
// in a stylesheet to whatever the default browser style is
// for such an element
if ( elem.style.display === "" && isHidden( elem ) ) {
values[ index ] = data_priv.access( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
}
} else {
if ( !values[ index ] ) {
hidden = isHidden( elem );
if ( display && display !== "none" || !hidden ) {
data_priv.set( elem, "olddisplay", hidden ? display : jQuery.css(elem, "display") );
}
}
}
}
// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
elem.style.display = show ? values[ index ] || "" : "none";
}
}
return elements;
}
我应该注意的是,切换类通常会更快,因为需要检查的信息更少。
.display-none {
display: none;
}
div.display-table-cell {
display: table-cell;
}
<button id="showdiv">Show/Hide</button>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
$("#showdiv").click(function() {
$(".mydiv").toggleClass('display-table-cell');
});
http://jsfiddle.net/7q27y/
如果你也了解CSS的优先级,那么从技术上讲,你就不需要在后者上使用div.
:
div.display-table-cell {
display: table-cell;
}
http://jsfiddle.net/7q27y/
当然,这是由于它的优先级,以及它落在另一个语句之后的事实,否则两者都将计算为相同的优先级。参见:
http://jsfiddle.net/7q27y/2/
相关文章:
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 表中单元格的总和
- ExtJS网格单元格编辑器,防止焦点松动问题
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 允许表单元格内容水平展开
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 需要将单元格值复制到html表中的其他单元格中
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- jQuery如何获取td单元格值
- 如何将jquery.thoggle()更改为使用display:table单元格