jQuery树菜单-不显示父类别

jQuery tree menu - parent categories not being displayed

本文关键字：显示 父类 菜单 jQuery      更新时间：2023-09-26

我正在尝试使用纯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>

我还制作了一把小提琴。

谢谢。

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

相关文章：