Javascript 我该怎么做;假;在此代码中

Javascript 我该怎么做;假;在此代码中,javascript,jquery,html,jquery-ui,collapse,Javascript,Jquery,Html,Jquery Ui,Collapse,我在这里找到了以下代码: 但我不明白在这段代码中如何处理data collapsed=“false”, 这是我的完整代码: <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>jQuery

我在这里找到了以下代码:

但我不明白在这段代码中如何处理data collapsed=“false”, 这是我的完整代码:

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>jQuery UI Accordion - Collapse content</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true
        });
    });
    </script>
</head>
<body>

<div role="tablist" class="ui-accordion ui-widget ui-helper-reset" id="accordion">
    <h3 tabindex="0" data-collapsed="false" aria-expanded="false" aria-selected="false" aria-controls="ui-id-2" id="ui-id-1" role="tab" class="ui-accordion-header ui-state-default ui-accordion-icons ui-state-focus ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 1</h3>
    <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-1" id="ui-id-2" style="display: none; height: 105px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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 tabindex="-1" aria-expanded="false" aria-selected="false" aria-controls="ui-id-4" id="ui-id-3" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 2</h3>
    <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-3" id="ui-id-4" style="display: none; height: 105px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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 tabindex="-1" aria-expanded="false" aria-selected="false" aria-controls="ui-id-6" id="ui-id-5" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 3</h3>
    <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-5" id="ui-id-6" style="display: none; height: 105px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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 tabindex="-1" aria-expanded="false" aria-selected="false" aria-controls="ui-id-8" id="ui-id-7" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 4</h3>
    <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-7" id="ui-id-8" style="display: none; height: 105px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <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>




</body></html>

jQuery UI手风琴-折叠内容
$(函数(){
$(“手风琴”)。手风琴({
可折叠:正确
});
});
第一节
莫里斯·莫里斯·安特、布兰迪·埃特、奥特莱斯a、苏西比特·埃特、夸姆。
整数ut neque。Vivamus nisi metus,molestie vel,年的孕妇,
调味品坐在阿梅特,努克。南阿尼布。Donec suscipit Peros。南美。
维韦拉·利奥·奥迪奥。马勒苏阿达库拉比图尔酒店。天鹅绒前庭
前十字勋章

第二节 塞德·努尔纳。别着急。叶舌。前庭坐位 阿梅特·普卢斯。Vivamus hendrerit,aliquet laoreet的dolor,mauris turpis porttitor velit,faucibus interdum tellus libero ac justo。万岁 夸姆。在suscipit faucibus urna

第三节 Nam enim risus,molestie et,porta ac,aliquam ac,risus。奎斯克 洛博蒂斯。马萨的Phasellus Pellentsque purus。埃尼安在佩德。 Phasellus ac libero ac tellus pellentesque semper。塞德·ac·费利斯。塞德 commodo、magna quis lacinia ornare、quam ante aliquam nisi、eu iaculis 利奥·普卢斯·维内纳蒂斯酒后驾车

  • 第一项
  • 清单项目二
  • 清单项目三
第四节 粗俗的格言。佩伦茨克居住者莫比·特里斯蒂克·塞内特斯等人 内图和马莱苏阿达是著名的埃吉斯塔斯土尔皮斯。同侧前前庭 在《虎皮浮雕》中;埃尼安 毛里斯山紫罗兰

Suspendisse eu nisl。自由女神。 整型贵宾会议。类aptent taciti socialsqu ad 利托拉·托伦特,每一个科努比亚·诺斯特拉,每一个希梅纳奥斯的接受者

问题是每次我重新加载页面时,它都会显示如下:

但是我想要这样:


请帮助我,谢谢。

您根本不需要修改任何HTML,因为jQueryUI手风琴具有
活动属性来确定加载时展开哪个面板。默认情况下,它是第一个面板。将此设置为
false
默认情况下折叠所有:

$("#accordion").accordion({
    collapsible: true,
    active: false
});

>

如果您在第一个
h3
标签中执行
data collapsed=“true”
,该怎么办?@D4V1D:我也尝试了,但没有成功Rory McCrossan:但它停止了所有可折叠的操作?Rory McCrossan:先生,现在它完全不可折叠了?现在发生了什么?应该是这样,这里有一个工作示例:检查控制台,因为代码中的其他地方可能有错误。拉里:我想使关闭的取消按钮可折叠,这可能吗?