Question

关于Jquery，我是一个初学者，因此希望可以在这里获得一些帮助:)！我浏览了各个论坛，并尝试了一些运气不好的代码！

我的网站上有多个手风琴手，当进入页面并单击选项卡时，默认关闭所有手风琴。在这里：http://adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/，您会看到手风琴嵌套在选项卡中，我想默认将它们关闭。

我还想保留打开另一个手风琴时的自动关闭功能。

因为我仍在学习，所以我仍在尝试适应如何按类查明手风琴并编写函数。

我会使用以下轮廓：

$(function () {
    $("#accordion").accordion({
        heightStyle: "content",
        collapsible: true,
        active: 'none'
    });
});

要查明手风琴，在所有选项卡中，它们似乎具有以下不同的类（按主题默认）：

clearfix edgtf-title-holder ui手风琴标题ui-state-default ui-corner-all

clearfix edgtf-title-holder ui手风琴标题ui状态默认ui手风琴标题有效ui状态活跃uicorner-top

我怎样才能将它们适当地组合在一起？

非常感谢:)

Answer 1

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
 
  </script>
</head>
<body>
 
<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>
 
 
</body>
</html>

根据文档none无效，

活动

类型：Boolean或Integer

默认值：0

Boolean：将active设置为false将折叠所有面板。

这要求可折叠选项为true。

Integer：活动（打开）的面板的从零开始的索引。负值会选择从最后一个面板倒退的面板。

引用：http://api.jqueryui.com/accordion/#option-active

我希望这会对您有所帮助。

Answer 2

active属性应为布尔值true|false

尝试

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

默认情况下关闭所有可折叠选项卡

2 个答案: