JQuery - 用逻辑隐藏/显示

时间:2012-07-09 16:04:32

标签: jquery

对于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

4 个答案:

答案 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()