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 />个元素。

这就是你想要的吗？

Answer 2

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

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

Jquery onclick show li，隐藏所有syblings li和children元素

2 个答案: