Question

我正在尝试使用cflayout在ColdFusion 11上创建一个手风琴控件。下面是我正在使用的代码：

<cflayout name="outerlayout" type="accordion" titlecollapse="true" width="150px"> 
    <cflayoutarea name="area1" collapsible="true" title="acc1"> 
        <h3>Area 1</h3> 
        <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
    </cflayoutarea>   
    <cflayoutarea name="area2" collapsible="true" title="acc2"> 
        <h3>Area 2</h3> 
        <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
        <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul> 
        <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul> 
    </cflayoutarea> 
</cflayout>

我的代码存在以下问题：
1.无论其内容如何，每个手风琴的高度都相同 2.无序列表不像往常一样显示我希望所有的手风琴最初都崩溃了。我无法完成它。

注意：我知道使用ColdFusion的cflayout并不明智。但无论如何我想用它。

Answer 1

我终于决定切换到jQuery解决方案，因为ColdFusion的cflayout解决方案似乎非常错误。这就是我使用jquery实现我的要求的方式。

<!doctype html>
<html lang="en">
<head>
  <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>
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      active: false,
      collapsible: true,
      heightStyle: "content"
    });

    $("#accordion>h3>a").click(function(){
        var loc = $(this).prop("href");
        window.open(loc, '_blank');
    })
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3><a href="http://www.google.com">Section 1</a></h3>
  <div>
  </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>

要解决我的第一个问题，我们需要将heightStyle选项设置为"content"。它确保每个手风琴元素的高度符合其元素的含量。

jQuery手风琴对无序列表没有任何问题。

最后为了让所有的手风琴最初崩溃，我们只需要将active设置为false。

还有一件事。我注意到jQuery手风琴的加载速度比Coldfusion的手风琴快。谢谢Adam Cameron＆amp; Scott Stroz推动我去寻找jQuery解决方案。

Answer 2

回答问题＃1：

ColdFusion 11上cflayout.js的代码具有硬编码为600的所有折叠选项卡的高度。这会导致每个选项卡中的滚动条或大空格。

编辑c：\ ColdFusion11 \ cfusion \ wwwroot \ CFIDE \ scripts \ ajax \ package \ cflayout.js中的代码，并删除第430行： _85e.height = 600;

编辑此代码后，您需要刷新模板和组件缓存（在ColdFusion Administrator的缓存部分中）。

在coldfusion 11类型手风琴的cflayout

2 个答案: