6

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

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

.mydiv {
display:table-cell;
}

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

4 に答える 4

17

代わり.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');
}
于 2013-08-04T19:11:08.583 に答える
3

@Gaby aka G. Petrioliのスタイリングに CSS を使用するか.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");
    }
});
于 2013-08-05T13:45:03.300 に答える
1 
.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/

于 2013-08-04T19:11:19.553 に答える