php-如何在HTML / Javascript的Windows帮助中执行树状结构-前端开发

我目前正在研究一个项目,我想创建一个HTML帮助页面,以向用户提供有关如何使用该应用程序的帮助和建议.我要实现的是树形布局,因此在左侧,所有标题旁边都有加号.然后,当用户单击加号按钮或文本时,它将与该部分的相关内...

我目前正在研究一个项目,我想创建一个HTML帮助页面,以向用户提供有关如何使用该应用程序的帮助和建议.

我要实现的是树形布局,因此在左侧,所有标题旁边都有加号.然后,当用户单击加号按钮或文本时,它将与该部分的相关内容一起展开.如果用户再次单击它,则现在已重新显示所有显示的项目.

我还没有找到任何有关如何执行此操作的不错的教程.

感谢您的任何帮助,您可以提供.

解决方法:

我花了一些时间来构建您所描述的快速树系统.有趣的小运动.复制并粘贴,在浏览器中打开(我正在使用FireFox).如果愿意,可以将DIV标签中的/-符号更改为图像.调整CSS的边距和内边距,使其无缝匹配.希望这可以帮助.

祝好运.

<html>
<head>
  <style type="text/css">

    div#tree ul { margin:0 0 0 20px; padding:0; list-style-type:none; }
    div#tree ul { display:none; }
    div#tree li>div { display:inline; margin-right:5px; cursor:pointer; }
    div#tree label:hover { text-decoration:underline; cursor:pointer; }
    div#tree>ul { display:block; }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
    $(document).ready(function () {
        //Set plus sign for all sub menus
        $('li:has("ul")>div').html('&plus;');

        //Handle plus/minus tree expansion
        $('li>div').on('click', function (e) {
            if($(this).parent('li').hasClass('selected')) {
                $(this).siblings('ul').slideUp();
                $(this).parent('li').removeClass('selected');
                $(this).html('&plus;');
            } else {
                $(this).siblings('ul').slideDown();
                $(this).parent('li').addClass('selected');
                $(this).html('&minus;')
            }
        })

        //Handle tree item link stored as LI data attribute
        $('li>label').on('click', function (e) {
            //This is your URL, URI, Link, Location, etc
            alert($(this).parent('li').attr('data-location'))
        })

    });
  </script>

</head>
<body>

    <div id="tree">
        <ul>
            <li data-location=""><div>&lfloor;</div><label>First Level Item1</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item2</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item3</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item4</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item5</label>
                <ul>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item1</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item2</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item3</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item4</label></li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item5</label>
                        <ul>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item1</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item2</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item3</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item4</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item5</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item6</label></li>
                            <li data-location=""><div>&lfloor;</div><label>Third Level Item7</label></li>
                        </ul>
                    </li>
                    <li data-location=""><div>&lfloor;</div><label>Second Level Item6</label></li>
                </ul>
            </li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item6</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item7</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item8</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item9</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item10</label></li>
            <li data-location=""><div>&lfloor;</div><label>First Level Item11</label></li>
        </ul>
    </div>

</body>
</html>

基础教程推荐