使用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