JQuery - 隐藏/显示逻辑

我是新手，当涉及到JQuery。简而言之，我有四个div，类“portlet-topper”。每个div都有类“portlet-content”的兄弟。这个内容是隐藏的，直到点击portlet-topper的一个实例。一旦它被点击，就会显示兄弟内容。我使用下面的代码：JQuery - 隐藏/显示逻辑

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

要将点击之前澄清：

| ---- portlet的礼帽-A ---- |

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

之后A点：

| ---- portlet的礼帽-A ---- |

的

portlet内容| ---- portlet的礼帽-B ---- |

如果我点击B，则会显示B的内容，并且A也会显示。如果点击了A，我想点击B显示B，同时隐藏答案A.如何在这个逻辑中编码？我需要这个为任何数量的div工作，而不仅仅是两个。实质上，只允许一次显示一组portlet内容。我想我会明确调用显示和隐藏，而不是切换。即使如此，我不知道从哪里开始...

此外，我使用Liferay，所以我几乎无法控制每个div的类和ID。我只能操纵css或javascript

来源

2012-07-09 sunrize920

请*，请*，这可能是*最后*时间*某人*描述*他们的HTML在我们？真的，只是向我们展示给我们更容易...并且可能会在[JS Fiddle]（http://jsfiddle.net/），[JS Bin]（http://jsbin.com）或类似的...中提供现场演示，相同的包含元素？或者在每个包装中有一对，包含'portlet-topper'和'portlet-content'？或者其他*结构？ – 2012-07-09 16:08:56

@DavidThomas通过描述html，我们将看到许多基于想象力的无用答案。 – undefined 2012-07-09 16:12:01

@undefined：...这是幸运的;我写的时候真的很恼火。 *咳嗽* =/ – 2012-07-09 16:12:56

我认为你需要做的是：

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

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

来源

2012-07-09 16:17:20

页面中是否有其他地方使用类'portlet-content'。如果没有，你可能只是这样做：

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

这将触发具有该类

来源

2012-07-09 16:09:47

手风琴也是一个不错的jQuery功能，如上所述@AMK – 2012-07-09 16:10:58

我相信你正在寻找的是jQuery的用户界面提供的功能每一个内容区域。

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

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

的jQuery：

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

来源

2012-07-09 16:10:14

如果我理解正确的话，你想portlet的内容最近点击要显示和隐藏休息。这是做它没有使用jQuery UI的故障安全方式：

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

如果.portlet-content是兄弟，不是.portlet-topper一个孩子，在.find()代替使用.next()。

来源

2012-07-09 16:11:06 jurgemaister

他们是兄弟姐妹，而不是后代。 ......可能是我对这个问题的最好猜测。 – 2012-07-09 16:12:05

'.portlet-topper'和'.portlet-content'是？ – jurgemaister 2012-07-09 16:12:51

我这么认为，是的。我认为，（从我的最佳猜测），它应该可能是$（this）.next（'。portlet-content'）。show（）;'，但是，这实际上是基于信息不足的猜测。 – 2012-07-09 16:14:23

JQuery - 隐藏/显示逻辑

回答

相关问题