如何隐藏或显示内在水平

Question

我想要点击一个li，其中包含ul，如果不可见，则变为可见（仅限第一级）并且如果它们可见则变为隐藏 例如 如果你点击＃2如果＃3被隐藏，则显示，如果＃3显示，则变为隐藏 如何隐藏或显示内在水平？

$(".accordion li").click(function(e){
    if($(this).find("> ul").is(":visible"))
		$(this).find("> ul").hide();	
	else
		$(this).find("> ul").show();
});
$(".accordion li:has(> ul)").each(function(index, element) {
    $(this).find("> a").removeAttr("href");
});

.accordion{font-family:'byekan';display:block}.accordion>ul>li{cursor:pointer;background-color:#2980b9;font-size:1.5rem;color:#fff}.accordion>ul>li:hover{background-color:#3498db}.accordion>ul>li:not(:last-of-type){border-bottom:1px solid #fff}.accordion>ul>li>a{display:inline-block;padding:15px}.accordion>ul>li>ul>li{cursor:pointer;background-color:#2c3e50;font-size:1.1rem;color:#fff}.accordion>ul>li>ul>li:hover{background-color:#34495e}.accordion>ul>li>ul>li>a{display:inline-block;padding:10px}.accordion>ul>li>ul>li>ul>li{cursor:pointer;background-color:#27ae60;font-size:.9rem;color:#ddd}.accordion>ul>li>ul>li>ul>li:hover{background-color:#2ecc71}.accordion>ul>li>ul>li>ul>li>a{display:inline-block;padding:6px}.accordion>ul>li>ul>li>ul>li>ul>li{cursor:pointer;background-color:#16a085;font-size:.9rem;color:#fff}.accordion>ul>li>ul>li>ul>li>ul>li:hover{background-color:#1abc9c}.accordion>ul>li>ul>li>ul>li>ul>li>a{display:inline-block;padding:4px}.accordion ul{display:inline}.accordion ul li{list-style:none}.accordion ul li a{color:#fff}.accordion ul li a:hover{color:#eee}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<aside class="accordion">
    <ul>
        <li><a>#1</a>

            <ul>
                <li><a>#2</a>

                    <ul>
                        <li><a href="">#3</a>
                        </li>
                        <li><a href="">#3</a>
                        </li>
                    </ul>
                </li>
                <li><a>#2</a>

                    <ul>
                        <li><a href="">#3</a>
                        </li>
                        <li><a href="">#3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a>#1</a>

            <ul>
                <li><a>#2</a>

                    <ul>
                        <li><a href="">#3</a>
                        </li>
                        <li><a href="">#3</a>

                            <ul>
                                <li><a href="">#4</a>
                                </li>
                                <li><a href="">#4</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</aside>

Answer 1

自编辑以来，现在我明白了你的意思，所以我编辑了我的答案。

就像这样简单：

$('li').on('click',function(e){
  
  e.stopPropagation();
  $(this).find('ul').toggle();
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="accordion">
    <ul>
        <li><a>#1</a>

            <ul>
                <li><a>#2</a>

                    <ul>
                        <li><a href="">#3</a>
                        </li>
                        <li><a href="">#3</a>
                        </li>
                    </ul>
                </li>
                <li><a>#2</a>

                    <ul>
                        <li><a href="">#3</a>
                        </li>
                        <li><a href="">#3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a>#1</a>

            <ul>
                <li><a>#2</a>

                    <ul>
                        <li><a href="">#3</a>
                        </li>
                        <li><a href="">#3</a>

                            <ul>
                                <li><a href="">#4</a>
                                </li>
                                <li><a href="">#4</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</aside>

您需要使用事件stopPropagation，因为如果您不这样做，那么来自容器li的事件将触发点击事件。

Answer 2

您需要更改javascript代码，如下所示。 DEMO

js：

$(".accordion li:has(> ul)").each(function (index, element) {
    $(this).find("> a").removeAttr("href");
});

$(".accordion li a").click(function(){
    $(this).parent().find('ul').slideToggle(300);
});