jquery - jquery onclick show li, hide ALL syblings li and children element

Question

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
    ul ul
    {
        display: none;
    }
    ul li
    {
        list-style-type: none;
    }

</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('ul li').addClass('reveal');
        $('.reveal').live('click', function (event) {
            $(this).children('ul').slideDown();
            $(this).siblings('li').children().slideUp();

        });
    });
</script>

<ul>
    <li>a
        <ul>
            <li>inner1
                <ul>
                    <li>bonner1
                        <ul>
                            <li>donner1<ul>
                                <li>konner1</li>
                                <li>konner2</li>
                            </ul>
                            </li>
                            <li>donner2</li>
                        </ul>
                    </li>
                    <li>bonner2</li>
                </ul>
            </li>
            <li>inner2</li>
        </ul>
    </li>
    <li>b
        <ul>
            <li>inner3</li>
            <li>inner4</li>
        </ul>
    </li>
</ul>

我想在 li click 事件上关闭所有 sybling 内部元素。此代码有效，但不是以所需的方式。它关闭 sybling 元素但不关闭 sybling 元素内的子元素。我怎样才能做到这一点？

Answer 1

我认为您正在寻找的是：

$(this).siblings('li').find('ul').slideUp();

这将向上滑动<ul />嵌套在兄弟<li />s 中的所有元素。

那是你要的吗？

Answer 2

如何将此功能添加到我的代码中：enter code here

检查这个小提琴：https ://jsfiddle.net/te366hu2/2/