对于JQuery我是新手。简单来说,我有四个div,类“portlet-topper”。每个div都有一个“portlet-content”类的兄弟。此内容将被隐藏,直到单击portlet-topper实例为止。单击后,将显示其兄弟内容。我使用以下代码:
$(".portlet-topper").click(function(e){
e.preventDefault();
$(this).siblings(".portlet-content").toggle();
});
点击前澄清:
| ---- portlet的礼帽-A ---- |
| ---- portlet的礼帽-B ---- |
单击A后:
| ---- portlet的礼帽-A ---- |
A的Portlet内容
| ---- portlet的礼帽-B ---- |
如果单击B,则显示B的内容,并且还会显示A's。如果单击了A,我希望单击B以隐藏A时显示B.如何在此逻辑中进行编码?我需要这个可以用于任何数量的div,而不仅仅是两个。实质上,只允许一次显示一组portlet内容。我想我会明确调用显示和隐藏,而不是切换。即便如此,我还不确定从哪里开始...
另外,我正在使用Liferay,所以我几乎无法控制每个div的类和id。我只能操纵css或javascript
答案 0 :(得分:1)
我相信您正在寻找的功能由jQuery UI提供。
演示: http://jsfiddle.net/SO_AMK/22fWm/
文档:http://jqueryui.com/demos/accordion/
jQuery:
$(function() {
$( "#accordion" ).accordion();
});
答案 1 :(得分:1)
我认为你需要这样做:
$(".portlet-topper").click(function(e){
e.preventDefault();
$(".portlet-content").hide();
$(this).siblings(".portlet-content").toggle();
});
否则,你永远不会隐藏你的内容。
答案 2 :(得分:0)
页面中是否存在使用“portlet-content”类的其他位置。如果没有,你可以这样做:
$('portlet-content').toggle();
这将切换具有该类
的每个内容区域答案 3 :(得分:0)
如果我理解正确,您希望显示最近点击的portlet的内容,并隐藏其余内容。这是一种不使用jQuery UI的故障安全方法:
$(".portlet-topper").click(function(e) {
$(".portlet-content").hide();
$(this).find(".portlet-content").show();
});
如果.portlet-content
是兄弟,而不是.portlet-topper
的孩子,请使用.next()
代替.find()
。