Come cambiare jquery .toggle() per usare display: table-cell?

Question

Sto usando jquery .toggle() per mostrare un div su una pagina che è stata visualizzata: nessuna sul caricamento della pagina. Tuttavia, sotto le impostazioni predefinite vengono visualizzati gli inserimenti jquery: block, dove vorrei visualizzare: table-cell. Come posso raggiungere questo obiettivo? Il mio tentativo finora:

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

.mydiv { 
display:table-cell; 
} 

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

Answer 1

Usa .toggleClass() invece e usare i CSS per lo stile ..

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/

Se si capisce la precedenza CSS pure, non è tecnicamente "bisogno" della div. su quest'ultima:

div.display-table-cell { 
    display: table-cell; 
} 

http://jsfiddle.net/7q27y/

Naturalmente, questo è dovuto al suo precedence e il fatto che cade dopo l'altra affermazione, che entrambi avrebbero calcolato come la stessa precedenza in caso contrario. Vedi:

http://jsfiddle.net/7q27y/2/

Answer 3

Quello che hai dovrebbe funzionare già.

In jQuery, a meno che l'attributo di stile dell'elemento ha display inizialmente impostata su qualcosa di diverso da none, quando il show si chiama, non fa altro che rimuovere l'attributo di stile per la visualizzazione. Non lo blocca.

È possibile vedere da soli in this fiddle che quando si fa clic sul pulsante, lo display impostato nel CSS è l'elemento su cui è impostato l'elemento.

Ecco il codice rilevante nel 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; 
} 

Vorrei sottolineare che le classi non girevoli di solito essere più veloce, in generale, perché c'è meno informazioni per verificare.

Answer 4

Utilizzare CSS per lo stile @Gaby aka G. Petrioli oppure utilizzare il metodo .css() in jQuery.

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