Javascript 显示/隐藏将不会加载
单击“查看更多”时，文本不会展开。怎么会？谢谢 HTML：Javascript 显示/隐藏将不会加载,javascript,html,css,Javascript,Html,Css,单击“查看更多”时，文本不会展开。怎么会？谢谢 HTML： <div id="wrap"> <h1>Show/Hide Content</h1> <p> This example shows you how to create a show/hide container using a couple of links, a div, a few lines of CSS, and s
<div id="wrap">
<h1>Show/Hide Content</h1>
<p>
This example shows you how to create a show/hide container using a
couple of links, a div, a few lines of CSS, and some JavaScript to
manipulate our CSS. Just click on the "see more" link at the end of
this paragraph to see the technique in action, and be sure to view the
source to see how it all works together.
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">
See more.
</a>
</p>
<div id="example" class="more">
<p>
Congratulations! You've found the magic hidden text! Clicking the
link below will hide this content again.
</p>
<p>
<a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">
Hide this content.
</a>
</p>
</div>
</div>
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
body {
font-size: 62.5%;
background-color: #777;
}
#wrap {
font: 1.3em/1.3 Arial, Helvetica, sans-serif;
width: 30em;
margin: 0 auto;
padding: 1em;
background-color: #fff;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
<div id="wrap">
<h1>Show/Hide Content</h1>
<p>
This example shows you how to create a show/hide container using a
couple of links, a div, a few lines of CSS, and some JavaScript to
manipulate our CSS. Just click on the "see more" link at the end of
this paragraph to see the technique in action, and be sure to view the
source to see how it all works together.
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">
See more.
</a>
</p>
<div id="example" class="more">
<p>
Congratulations! You've found the magic hidden text! Clicking the
link below will hide this content again.
</p>
<p>
<a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">
Hide this content.
</a>
</p>
</div>
</div>
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
body {
font-size: 62.5%;
background-color: #777;
}
#wrap {
font: 1.3em/1.3 Arial, Helvetica, sans-serif;
width: 30em;
margin: 0 auto;
padding: 1em;
background-color: #fff;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
您正在从HTML窗口调用
showHideshowHideshowHide必须单击两次以显示附加内容的附加问题与您的逻辑有关。当您第一次通过时，该元素的显示并没有像您预期的那样设置为
nonedisplay='block'showHideshowHideshowHide必须单击两次以显示附加内容的附加问题与您的逻辑有关。当您第一次通过时，该元素的显示并没有像您预期的那样设置为
nonedisplay='block'<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
});//]]>
//
这意味着您正在jQuery的load事件的匿名函数中定义showHide。如果您将第一个下拉列表更改为“no wrap（head）”，它将不使用JavaScript，您的onclick将能够看到定义的函数。代码是正确的；它不起作用的原因是您设置JSFIDLE的方式。在右侧，它要求一个框架/您希望您的JS显示在那里，您有jQuery和onLoad（我相信是默认值）-这使得您的fiddle的结果代码如下所示：
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
});//]]>
//
这意味着您正在jQuery的load事件的匿名函数中定义showHide。如果您将第一个下拉列表更改为“no wrap（head）”，它将使您的JavaScript保持不变，并且您的onclick将能够看到定义的函数。我已更正了一个小错误，它需要单击两次才能启动功能。刚刚更换！='“无”已替换为==“块”。另外，在JSFIDLE中，您在“choose framework”下选择了错误的设置。应该是“头不包” 这也是实现同样目标的一个非常简单的方法：
function showHide() {
$('#example').toggle();
}
我已经纠正了一个小错误，它需要2次点击启动功能。刚刚更换！='“无”已替换为==“块”。另外，在JSFIDLE中，您在“choose framework”下选择了错误的设置。应该是“头不包” 这也是实现同样目标的一个非常简单的方法：
function showHide() {
$('#example').toggle();
}
可以尝试jquery$（document.ready（function（）{$（“.showLink”）。单击（function（）{$（“.more”）.toggle（）；}）；哎呀，我忘了存钱了。已修复。非常感谢，但我遇到一个问题，必须单击两次才能显示“查看更多”。。有什么想法吗？可以尝试jquery$（document.ready（function（）{$（“.showLink”）。单击（function（）{$（“.more”）.toggle（）；}）；哎呀，我忘了存钱了。已修复。非常感谢，但我遇到一个问题，必须单击两次才能显示“查看更多”。。有什么想法吗？非常感谢。你知道为什么“查看更多”必须点击两次才能显示吗？非常感谢。你知道为什么“查看更多”必须点击两次才能显示吗？请在问题中包含你的代码。如果jsfiddle失败了，你的问题对将来的其他人来说将毫无价值。另外，请对不起作用的内容进行更全面的描述。请在问题中包含您的代码。如果jsfiddle失败了，你的问题对将来的其他人来说将毫无价值。另外，请对不起作用的内容进行更全面的描述。