我有以下代码在 Fancybox 弹出窗口中显示 Accordion 。但是在页面加载时我不想显示 Accordion 。如果我隐藏它，内容也会在弹出窗口中显示 Accordion 时隐藏。
单击 Click For The Instructions 我想显示 Accordion 。我也想保留 fancybox 功能。
我的代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
jQuery("#homepage_popup_welcome").fancybox().trigger('click');
</script>
</head>
<body>
<a id = "homepage_popup_welcome" href="#mydiv" style="">Click For The Instructions</a>
<div id = "mydiv" style = "width:900px;display:none;"> <!-- See the display none -->
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</div>
</body>
</html>
如果我删除 display:none来自 <div id = "mydiv" style = "width:900px;display:none;"> Accordion 在页面加载时也可见。
在页面加载时，链接应该只可见，而不是 Accordion 。
最佳答案
不要放display:none以内联样式。通过你的CSS来做，把它放在#mydiv上然后用onclick函数显示
#accordion{
display:none;
}
您也可以将其添加到您的 <head>如果您不使用样式表，请选择部分。
关于jquery - 如何在页面加载时隐藏 Accordion 并仅在单击元素时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24735682/