223
文章
5
说说
70
评论
114106
访问

个人博客网站:prettywordpress.com(吃饭用大碗的程序猿)

最新评论
qq_avatar
1月前,”ヘル”在《码农=新生代农民工》
说:打卡@[huaixiao]
qq_avatar
2月前,”肋巴骨”在《Win10系统桌面一直闪屏自动刷新怎么办》
说:不错啊,这是谁写的教程,真棒
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:大佬不考虑加个灯箱吗,图片不能放大
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:pjax失效咋办,F12显示已取消
qq_avatar
3月前,”热爱”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:测试Markdown语法加表情 OωO@(暗地观察)@[哈哈]@[ganga]
A+

jQuery UI折叠面板如何设置全部关闭(亲测有效)

标签: 最后编辑:2020年5月7日

jQuery UI折叠面板默认的是第一个面板打开,有些小伙伴需要全部关闭如何实现呢?

只需要在

jQuery("#accordion").accordion({
heightStyle: "content",
collapsible:true,
active:false 
});
加入collapsible:trueactive:false 即可,默认所有面板不触发。列子如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 折叠面板(Accordion)</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion({
       collapsible:true,
	active:false
     });
  });
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>部分 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>部分 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>部分 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>部分 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> 
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表一下你的评论呗

回复评论代表你同意网站的 隐私政策

  1. Hello just wanted to give you a quick heads up.

    The text in your post seem to be running off the screen in Chrome.
    I’m not sure if this is a format issue or something to do with web browser compatibility but I thought I’d post to let you know.
    The design and style look great though! Hope you
    get the issue fixed soon. Thanks

    1. Thank you for your message. I’ll deal with it as soon as possible. 🙂

... 友情提示 请保留版权标识
复制成功!
目录