jquery .toggle（）をdisplay：table-cellに変更するにはどうすればいいですか？

Question

jquery .toggle（）を使用して、ページの読み込み時にdisplay：noneを持つページにdivを表示しています。しかし、デフォルト設定では、jqueryはdisplay：blockを挿入します。ここではdisplay：table-cellが必要です。どうすればこれを達成できますか？これまでの私の試み：

<div class="mydiv" style"display:none">test</div> 

.mydiv { 
display:table-cell; 
} 

$("a#showdiv").click(function() { 
    $(".mydiv").toggle(); 

Answer 1

使用.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'); 
} 

Answer 2

.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/

Answer 3

すでに動作するはずですが何をしています。 jQueryので

、要素のスタイル属性が最初showが呼び出されるnone、以外の何か他のものに設定displayていない限り、それがないすべての表示のためのスタイル属性を削除しています。ブロックを設定しません。

this fiddleでボタンをクリックすると、CSSに設定されているdisplayが要素に設定されていることが分かります。

ここでは、関連するコードがjQuery sourceにあります：

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; 
} 

私がチェックするための以下の情報があるので、クラスをトグルすると、通常は一般的に速くなることに注意してください。

Answer 4

スタイリングのために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"); 
    } 
});