Question

我尝试使用纯HTML和jQuery创建树结构。我到目前为止已经做到了，但我有一个小问题：我不明白为什么没有显示有孩子的<li>元素，但是如果你点击子弹或者名字所在的地方是的，孩子们正在展示，也是父母的类别。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('li')
                .css('pointer','default')
            $('li:has(ul)')
                .click(function(event){
                    if (this == event.target) {                     
                        $(this).children().toggle('slow');
                    }
                    return false;
                })              
                .children().hide();
            $('li:not(:has(ul))').css({cursor:'default'});
        });
    </script>
</head>
<body>
    <ul>
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
        <li><a href="#">Aliquam ultricies neque vel efficitur luctus.
            <ul>
                <li><a href="#">Aenean quis sapien ultrices, convallis mauris ut, vestibulum dolor.</a></li>
                <li><a href="#">
                    Aliquam ac lectus vehicula, imperdiet orci a, gravida dolor.
                    <ul>
                        <li><a href="#">Donec eu sapien eu ante euismod elementum.</a></li>
                        <li><a href="#">Donec eu urna non nulla dapibus porttitor.
                            <ul>
                                <li><a href="#">Nulla dignissim felis eu risus posuere, ac venenatis nunc sagittis.</a></li>
                                <li><a href="#">Fusce ac nibh facilisis, iaculis velit vestibulum, scelerisque diam.</a></li>
                            </ul>
                        </a></li>
                    </ul>
                </a></li>
            </ul>
        </a></li>
        <li><a href="#">Cras ornare libero in massa lobortis bibendum.</a></li>
    </ul>
</body>
</html>

我还创建了一个fiddle。

谢谢。

Answer 1

您遇到jQuery的子功能问题。如果在没有参数的情况下调用此函数，它将应用所有子元素的更改。在这种情况下，这是问题，因为具有文本内容的<a>标记是<li>的子元素，因此您应该将children函数与此.children("ul")之类的参数一起使用。完整的工作示例，您可以看到here。

jQuery树菜单 - 未显示父类别

1 个答案: