使用block / none顯示/隱藏jquery

Question

任何人都可以告訴我如何使用此代碼在DIV之間顯示和隱藏數據（不隱藏和顯示 - 我想要另一種方式）？

我在.js文件中使用：

function toggle(sDivId) {
                var oDiv = document.getElementById(sDivId);
                oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}

在.php文件中：

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1">
    text here
    </div>
</div>

這段代碼工作得很好但是當頁面加載時我希望文本已經隱藏（不是在我點擊“隱藏和顯示”文本之后）。

謝謝！

Answer 1

您可以使用您擁有的代碼，但只需添加display:none; 在css。 或者在php里面的style="display:none;"

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style="display:none;">
    text here
    </div>
</div>

jQuery還有一個你可以使用的toogle（）函數。

演示

Answer 2

我可能誤解了你的問題，但如果你想隱藏在頁面加載的文本，你不能只是粘貼display：none標簽，如下所示：

<div id="divContent1" style="display: none">
text here
</div>

Answer 3

$('#clickMe').click(function(){
 $('#divContent1').toggle();

}）;

小提琴演示

Answer 4

您提供的代碼不使用jquery。 如果你想使用jquery這樣做，你可以改變這樣的事情。

function toggle(sDivId) {
    $("#"+sDivId).toggle();
}

並且你的php塊你要添加display：none; 最初隱藏內部div

<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style='display:none'>
    text here
    </div>
</div>

Answer 5

您可以使用toggle （）函數在show （）和hide （）之間交替切換。 否則，直接使用show （）和hide （）函數。

Answer 6

在body的onload事件中調用函數toggle('divContent1')

<body onload="toggle('divContent1')">

Answer 7

使用此代碼：

function load(){
   document.getElementByID('divContent1').style.display = 'none';
}

並在你的HTML中

<body onLoad = "load()">

使用block / none顯示/隱藏jquery

問題描述

7 個解決方案

解決方案1
1 2013-09-21 18:01:28

演示

解決方案2
1 2013-09-21 18:04:25

解決方案3
1 已采納 2013-09-21 18:06:46

解決方案4
1 2013-09-21 18:08:25

解決方案5
0 2013-09-21 18:03:36

解決方案6
0 2013-09-21 18:07:43

解決方案7
0 2013-09-21 18:09:41

使用block / none顯示/隱藏jquery

問題描述

7 個解決方案

解決方案1 1 2013-09-21 18:01:28

演示

解決方案2 1 2013-09-21 18:04:25

解決方案3 1 已采納 2013-09-21 18:06:46

解決方案4 1 2013-09-21 18:08:25

解決方案5 0 2013-09-21 18:03:36

解決方案6 0 2013-09-21 18:07:43

解決方案7 0 2013-09-21 18:09:41

解決方案1
1 2013-09-21 18:01:28

解決方案2
1 2013-09-21 18:04:25

解決方案3
1 已采納 2013-09-21 18:06:46

解決方案4
1 2013-09-21 18:08:25

解決方案5
0 2013-09-21 18:03:36

解決方案6
0 2013-09-21 18:07:43

解決方案7
0 2013-09-21 18:09:41