Question

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

创建一个包含多个列表的页面，每个列表都包含一个嵌套列表，以便在单击链接时显示。
点击链接并显示内容后，点击其他链接时，会隐藏之前显示的内容，并显示新内容。
当点击页面上任何地方远离显示的内容时，此次点击将隐藏该项目。

这是一张Pen，显示了揭示动作按预期工作，但这并不像我到目前为止那样起作用。

任何指针都会非常感激。

感谢。

Answer 1

试试这个：

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

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

FIDDLE DEMO

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/

jQuery .show（） - 显示/隐藏多个元素

3 个答案: