CQ5手风琴组件
嗨，我正在尝试设计一个手风琴组件，在AEM中，我们用美观的方式来代替jsp编写html代码，并在客户机库下为css和js编写不同的文件。
我只是编写了下面写的部分，并为相同的部分编写了js，但无法看到任何更改.谁能给我一个解决方案来实现同样的..。->when --我单击“显示”，一个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> 回答 1
Stack Overflow用户
发布于 2015-08-13 13:50:40
从这个角度来看，我认为这和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请求都被dispatcher禁止，因此，位于/apps下的所有客户端库都应该合并并缩小为一个通常位于/etc下的文件。为此，可以使用以下存储库节点结构：
/apps/mysite/-components/-mycomponent/-mycomponent.html精巧模板 -clientlib/jcr:primaryType=cq:ClientLibraryFoldercategories=[mysite.mycomponent]-css.txt只包含对style.css的引用 -style.css包含样式片段 -js.txt只包含对script.css的引用 -script.js包含脚本片段
/etc/designs/-mysite/-clientlib/jcr:primaryType=cq:ClientLibraryFoldercategories=[mysite.publish]embed=[mysite.mycomponent, ...]dependencies=[mysite.jquery]
embed客户端库的/etc属性将使它嵌入并合并在同一个文件中--列出的所有客户机库。与dependencies属性下列出的客户端库相反，它不会被合并，它将作为一个单独的文件使用。您可以使用这些属性来构建优化站点所需的结构。还有一些设置可以自动缩小这些文件。
然后，在页面上包含位于/etc下的/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>如果使用AEM6.1，甚至可以删除data-sly-unwrap，因为<sly>标记具有相同的效果。
在此之后，位于像/apps/mysite/components/mycomponent/mycomponent.html这样的路径下的组件的简洁模板如下所示：
<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>https://stackoverflow.com/questions/31938093
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号