Làm thế nào để thay đổi jquery .toggle() để sử dụng display: table-cell?

Question

Tôi đang sử dụng jquery .toggle() để hiển thị div trên trang có hiển thị: không có trang tải. Tuy nhiên, theo mặc định, cài đặt jquery chèn display: block, nơi tôi muốn hiển thị: table-cell. Làm thế nào tôi có thể đạt được điều này? nỗ lực của tôi cho đến nay:

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

.mydiv { 
display:table-cell; 
} 

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

Answer 1

Sử dụng .toggleClass() thay vào đó và sử dụng css cho phong cách ..

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/

Nếu bạn hiểu CSS được ưu tiên là tốt, bạn không về mặt kỹ thuật "nhu cầu" các div. trên sau:

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

http://jsfiddle.net/7q27y/

Tất nhiên, điều này là do nó ưu tiên và thực tế nó rơi sau tuyên bố khác, cả hai đều sẽ được tính là ưu tiên tương tự khác. Xem:

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

Answer 3

Những gì bạn phải làm việc.

Trong jQuery, trừ khi thuộc tính kiểu của phần tử có display ban đầu được đặt thành một thứ khác không phải là none, khi gọi show, tất cả điều đó sẽ loại bỏ thuộc tính kiểu hiển thị. Nó không đặt nó chặn.

Bạn có thể tự mình xem trong this fiddle khi nhấn nút, display được đặt trong CSS là phần tử được đặt thành.

Dưới đây là các mã có liên quan trong 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; 
} 

Tôi nên lưu ý rằng các lớp học chuyển đổi qua lại thường sẽ nhanh hơn nói chung vì có ít thông tin để kiểm tra.

Answer 4

Sử dụng CSS để tạo kiểu @Gaby aka G. Petrioli hoặc sử dụng phương pháp .css() trong 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"); 
    } 
});