jQuery .show()-显示/隐藏多个元素 [英] jQuery .show() - show / hide for multiple elements

问题描述

我正在努力实现这一目标:

I am trying to achieve this:

1. 创建一个包含多个列表的页面，每个列表包含一个嵌套列表，这些链接列表在单击链接时将显示出来.

1. Create a page with multiple lists, each containing a nested list to be revealed when a link is clicked.

单击链接并显示内容时，单击另一个链接时，将隐藏先前显示的内容，并显示新内容.

When a link is clicked, and the content is revealed, when clicking on another link, the previously revealed content is hidden, and the new one revealed.

在页面上远离显示内容的任何位置单击时，此单击将隐藏该项目.

When clicking anywhere on the page away from the revealed content, this click will hide the item.

这是一支笔，显示了显示动作按预期方式工作，但是到目前为止，这还没有达到我的期望.

Here is a Pen showing the reveal action working as expected, but this does not function as I'd like so far.

http://codepen.io/juxprose/pen/pzvuC

任何指针将不胜感激.

谢谢.

推荐答案

尝试一下:

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.show').hide();    
    $(this).next('.show').slideDown();
});

$(document).click(function () {
    $('.show').slideUp();    
});

电影演示

这篇关于jQuery .show()-显示/隐藏多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！