Как изменить jquery .toggle (), чтобы использовать display: table-cell?

Question

Как изменить jquery .toggle (), чтобы использовать display: table-cell?

6

Я использую jquery.toggle(), чтобы показать div на странице с дисплеем: нет при загрузке страницы. Тем не менее, по умолчанию параметры jquery inserts display: block, где я бы хотел отображать: table-cell. Как я могу это достичь? Моя попытка:

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

.mydiv {
display:table-cell;
}

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

alias51 04 авг. 2013, в 21:56

Источник

2

Вы можете переключать имя класса, которое меняет его между display: none и display: table-cell
Jared Farrish 04 авг. 2013, в 19:05

Теги:

javascript

jquery

css3

jquery-ui

4 ответа

Ещё вопросы

Вы можете переключать имя класса, которое меняет его между display: none и display: table-cell

Gaby aka G. Petrioli · Answer 1 · 2013-08-04T20-02-00.000Z

Используйте .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');
}

M1K1O · Answer 2 · 2013-08-05T15-22-00.000Z

Используйте CSS для стилизации @Gaby aka G. Petrioli или используйте метод .css() в 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");
    }
});

kalley · Answer 3 · 2013-08-04T20-02-00.000Z

Что вы должны работать уже.

В jQuery, если атрибут стиля элемента display изначально не установлен на другое, кроме none, когда вызывается show, все, что он делает, - это удалить атрибут стиля для отображения. Он не блокирует блок.

Вы можете убедиться в этой скрипте, что при нажатии кнопки display, установленный в CSS, является тем, что элемент установлен в.

Здесь соответствующий код в источник 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;
}

Я должен отметить, что переключение классов обычно будет быстрее вообще, потому что меньше информации для проверки.

Достаточно верно : jsfiddle.net/Nh97q/1 Хороший улов.
Просто для потомков: jQuery восстанавливает первоначальные настройки отображения, но если существует несколько определений @media, он НЕ восстанавливает тот, который используется устройством / браузером.

Jared Farrish · Answer 4 · 2013-08-04T20-28-00.000Z

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