Question

我有以下代码在Fancybox popup中显示手风琴。但是在页面加载时我不想显示手风琴。如果我隐藏它，内容也会隐藏在弹出窗口中显示手风琴。

点击点击For The Instructions 我想展示accordion.I wnat以保持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>

enter image description here

如果我从display:none移除<div id = "mydiv" style = "width:900px;display:none;">，手风琴在页面加载时也会显示。

在页面加载时，链接应仅可见，而不是手风琴。

Answer 1

不要将display:none置于内联样式中。通过你的css做到这一点，把它放在#mydiv上然后用onclick函数显示它

#accordion{
display:none;
}

如果您不使用样式表，也可以将其添加到<head>部分。

如何在页面加载时隐藏手风琴并仅在单击元素时显示

1 个答案: