jquery - jQuery .show() - 显示/隐藏多个元素

Question

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

1. 创建一个包含多个列表的页面，每个列表都包含一个嵌套列表，当单击链接时将显示该列表。

2. 当一个链接被点击时，内容被显示出来，当点击另一个链接时，之前显示的内容被隐藏，而新的内容被显示出来。

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

这是一支笔，显示了按预期工作的显示操作，但到目前为止，这并没有像我想要的那样起作用。

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

任何指针将不胜感激。

谢谢。

Answer 1

尝试这个：

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

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

小提琴演示

Answer 2

如果我理解良好，这段代码应该做你想做的事：

html：

<ul id="listItems">
    <li><a href="#">Item1</a>
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
        </ul>
    </li>
    <li><a href="#">Item2</a>
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
        </ul>
    </li>
    <li><a href="#">Item3</a>
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
            <li>Item 3.3</li>
        </ul>
    </li>
</ul>

js：

$(document).ready(function() {
   $("#listItems ul").hide();
   $("#listItems a").on("click", function() {
       $("#listItems ul").hide();
       $(this).next().show();
   });
   $(document).click(function(e) {
    if ( $(e.target).closest('#listItems').length === 0 ) {
        $("#listItems ul").hide();
    }
   });
});

Answer 3

尝试这个，

$('.trigger').click(function(){
    $('.show').slideUp();
    $(this).next('.show').slideDown(); 
});

小提琴 http://jsfiddle.net/8jedA/