CQ5 Sightly Accordion 组件答案

【问题标题】：CQ5 Sightly Accordion componentCQ5 Sightly Accordion 组件
【发布时间】：2015-08-11 09:29:34
【问题描述】：

您好，我正在尝试在 AEM 中使用视觉设计一个手风琴组件，我们在客户端库下编写 html 代码以及用于 css 和 js 的不同文件，而不是 jsp。

我只是编写了下面的编写部分并编写了相同的 js，但看不到任何更改...有人可以为我提供实现相同的解决方案.. ->当我单击显示 parsys 部分时打开，当显示转换为隐藏时，当我单击隐藏时 parsys 部分关闭并隐藏转换为显示。

<div data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap>
<css data-sly-call="${clientLib.css @ categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
<js data-sly-call="${clientLib.js @ categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
</div>  
<div data-sly-test="${wcmmode.edit}">Accordion_2 component</div>
<div class="about-contentcontainer">
<div class="about-content">
<div class="awards">
<h4> <a href="javascript:void(0);"><span class="more">Show</span></a></h4>
<h4> <a href="javascript:void(0);"><span class="more expanded">Hide</span></a></h4>
</div>
</div>
</div>

<script>// <![CDATA[
    $(document).ready(function() {

        alert("Hello");
        $(".awards h4 a").click(function() {

    enter code here
            $(this).parent().next().slideToggle("slow");
            var htmlStr = $(this).find(".more").html();
            if (htmlStr == "Show") {
                $(this).find(".more").html("Hide");
                $(this).find(".more").addClass("expanded");
            } else {
                $(this).find(".more").html("Show");
                $(this).find(".more").removeClass("expanded");
            }
        });
    });
// ]]></script>

【问题讨论】：

标签： accordion aem sightly

【解决方案1】：

看，我认为这与 Sightly 甚至与 AEM 无关。另外，我不确定您要切换哪些内容。

以下是用于切换内容的工作 HTML 片段（独立于 AEM）：

<style>
    .toggle-content {
        display: block;
    }
    .toggle-content-hide,
    .toggle-content-hidden .toggle-content-show {
        display: inline;
    }
    .toggle-content-show,
    .toggle-content-hidden .toggle-content-hide {
        display: none;
    }
</style>

<a href="#" class="toggle-content">
    <span class="toggle-content-show">Show</span>
    <span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 1</div>

<a href="#" class="toggle-content">
    <span class="toggle-content-show">Show</span>
    <span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 2</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
jQuery(function($) {
    $('.toggle-content').click(function () {
        $(this).toggleClass('toggle-content-hidden').next().toggle('slow');
        return false;
    })
});
</script>

要在 AEM 中实现这一点，您应该将内联 CSS 放入客户端库的 CSS 文件中，并将内联 JS 放入客户端库的 JS 文件中。我通常建议将它们放在组件本身的同一个客户端库中，以便与该组件相关的所有内容都在同一个文件夹中。但是这样做时，重要的是要记住，在发布服务器上，出于安全原因，调度程序禁止所有 /apps 请求，因此位于 /apps 下的所有客户端库应合并并缩小为一个文件，通常位于 /etc 下的某处。为此，您可以使用以下存储库节点结构：

/apps/
- mysite/
  - components/
    - mycomponent/
      - mycomponent.htmlSightly 模板
      - clientlib/
        jcr:primaryType = cq:ClientLibraryFolder
        categories = [mysite.mycomponent]
        
        css.txt 仅包含对 style.css 的引用
        
        style.css 包含样式 sn-p
        
        js.txt 仅包含对 script.css 的引用
        
        script.js 包含脚本 sn-p
/etc/
- designs/
  - mysite/
    - clientlib/
      jcr:primaryType = cq:ClientLibraryFolder
      categories = [mysite.publish]
      embed = [mysite.mycomponent, ...]
      dependencies = [mysite.jquery]

/etc 客户端库的embed 属性将使其在同一个文件中嵌入并合并所有列出的客户端库。与dependencies 属性下列出的客户端库相反，它们不会被合并，而是作为单独的文件提供。您可以使用这些属性来构建优化站点所需的结构。还有一些设置可以自动缩小或不缩小这些文件。

然后，您可以在页面上包含位于/etc 下的mysite.publish 主客户端库。因此，您的页面 <head> 元素将包含类似以下 Sightly 模板的内容：

<head data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientLib.all @ categories='sd-singtel.accordion_2'}" data-sly-unwrap/>
</head>

如果您使用的是 AEM 6.1，您甚至可以删除 data-sly-unwrap，因为 <sly> 标记具有相同的效果。

之后，位于/apps/mysite/components/mycomponent/mycomponent.html 之类的路径下的组件的 Sightly 模板将如下所示：

<div data-sly-test="${wcmmode.edit}">mycomponent name</div>
<a href="#" class="toggle-content">
    <span class="toggle-content-show">Show</span>
    <span class="toggle-content-hide">Hide</span>
</a>
<div>${properties.myContentProperty}</div>

【讨论】：