Coldfusion 11 中类型手风琴的布局

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. 无序列表无法正常显示。
3.我想让所有的手风琴都开始折叠。我无法完成它。

注意：我知道使用 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 & 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 of type accordion in coldfusion 11

coldfusion