Question

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

Answer 1

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

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

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

jQuery：

$(function() {
    $( "#accordion" ).accordion();
});

Answer 2

我认为你需要这样做：

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

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

Answer 3

页面中是否存在使用“portlet-content”类的其他位置。如果没有，你可以这样做：

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

这将切换具有该类

的每个内容区域

Answer 4

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

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

如果.portlet-content是兄弟，而不是.portlet-topper的孩子，请使用.next()代替.find()。

JQuery - 用逻辑隐藏/显示

4 个答案: