0

说到 JQuery，我是新手。简单地说，我有四个“portlet-topper”类的 div。每个 div 都有一个“portlet-content”类的兄弟。此内容是隐藏的，直到单击 portlet-topper 的一个实例。单击后，将显示其同级内容。我使用以下代码：

$(".portlet-topper").click(function(e){
    e.preventDefault();
    $(this).siblings(".portlet-content").toggle();
});

点击前澄清：

|----portlet-topper-A----|

|----portlet-topper-B----|

点击A后：

|----portlet-topper-A----|

A 的 Portlet 内容

|----portlet-topper-B----|

如果我单击 B，则显示 B 的内容，而 A 的内容也将显示。如果点击了A，我希望在隐藏A的同时点击B来显示B。我将如何在这个逻辑中进行编码？我需要它适用于任意数量的 div，而不仅仅是两个。本质上，只允许一次显示一组 portlet 内容。我想我会明确调用显示和隐藏，而不是切换。即使这样，我也不确定从哪里开始......

另外，我正在使用 Liferay，所以我几乎无法控制每个 div 的类和 id。我只能操作 css 或 javascript

4

4 回答 4

1

我相信您正在寻找的功能是由 jQuery UI 提供的。

演示：http: //jsfiddle.net/SO_AMK/22fWm/

文档：http: //jqueryui.com/demos/accordion/

jQuery：

$(function() {
    $( "#accordion" ).accordion();
});​
于 2012-07-09T16:10:14.190 回答
1

我认为你需要这样做：

$(".portlet-topper").click(function(e){ 
    e.preventDefault();
    $(".portlet-content").hide();
    $(this).siblings(".portlet-content").toggle(); 
});

否则，您将永远不会隐藏您的内容。

于 2012-07-09T16:17:20.667 回答
0

页面中是否还有其他地方使用了“portlet-content”类。如果没有，你可以这样做：

$('portlet-content').toggle();

这将切换具有该类的每个内容区域

于 2012-07-09T16:09:47.560 回答
0

如果我理解正确，您希望显示最近单击的 portlet 的内容，并隐藏其余内容。这是一种不使用 jQuery UI 的故障安全方式：

$(".portlet-topper").click(function(e) {
    $(".portlet-content").hide();
    $(this).find(".portlet-content").show();
});

如果 case.portlet-content是 的兄弟姐妹，而不是 的孩子，请.portlet-topper使用..next().find()

于 2012-07-09T16:11:06.677 回答