Question

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

我只是简单地编写了下面写的部分并为同一个写了js但是我看不到任何变化......有人可以给我一个解决方案来实现相同的... - ＆gt;当我点击显示一个解析部分打开，当show转换为隐藏时，当我点击隐藏时，parsys部分关闭并隐藏转换为show。

   $("table.ms-formtable > tbody > tr").each(function(){
       var text = $(this).find("td:first").find("nobr").text();
       if(text === 'Question') {
          $(this).remove();
       }
   });

Answer 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.html视觉模板
      - clientlib/
        jcr:primaryType = cq:ClientLibraryFolder
        categories = [mysite.mycomponent]
        
        css.txt仅包含对style.css
        的引用
        style.css包含样式摘录
        
        js.txt仅包含对script.css的引用
        
        script.js包含脚本代码段
/etc/
- designs/
  - mysite/
    - clientlib/
      jcr:primaryType = cq:ClientLibraryFolder
      categories = [mysite.publish]
      embed = [mysite.mycomponent, ...]
      dependencies = [mysite.jquery]

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

在页面上，您可以在mysite.publish下添加/etc主客户端列表。因此，您的页面<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>

CQ5 Sightly Accordion组件

1 个答案: