css 网页中的嵌套下拉列表未显示

ht4b089n 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(117)

我有一个网页，在这个菜单栏中，我有一个下拉组件列表的按钮。在这些组件下有一些子菜单组件。我不能得到这个。我想要主菜单和组件以及这些组件的子菜单。我尝试了以下代码

<ul id="menu-top" class="nav navbar-nav navbar-right">
<li><a href="dashboard.php" class="menu-top-active">DASHBOARD</a></li>

<li>
<a href="#" class="dropdown-toggle" id="ddlmenuItem" data-toggle="dropdown"> Categories <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">
<ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">North,/ul>
<li role="presentation"><a role="menuitem" tabindex="-1" href="add-category.php">Add Category</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="manage-categories.php">Manage Categories</a></li>
</ul>
</li>
<li>

<ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">
<ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">South/ul>
<li role="presentation"><a role="menuitem" tabindex="-1" href="add-language1.php">Add Language</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="manage-language1.php">Manage Language</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="manage-language1.php">Add Population</a></li>

</ul>
</li>

我希望它显示为enter image description here
小提琴是Fiddle

css

来源：https://stackoverflow.com/questions/75704940/nested-dropdown-list-in-web-page-not-displaying

1条答案

按热度按时间

qojgxg4l1#

试试这个代码

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   

    <style>
        /* Remove default bullets */
        ul,
        #myUL {
            list-style-type: none;
        }

        /* Remove margins and padding from the parent ul */
        #myUL {
            margin: 0;
            padding: 0;
        }

        /* Style the caret/arrow */
        .caret {
            cursor: pointer;
            user-select: none;
            /* Prevent text selection */
        }

        /* Create the caret/arrow with a unicode, and style it */
        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px;
        }

        /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
        .caret-down::before {
            transform: rotate(90deg);
        }

        /* Hide the nested list */
        .nested {
            display: none;
        }

        /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
        .active {
            display: block;
        }
    </style>

    <title>Hello, world!</title>
</head>

<body>
    <ul id="myUL">
        <li><span class="caret">Beverages</span>
            <ul class="nested">
                <li>Water</li>
                <li>Coffee</li>
                <li><span class="caret">Tea</span>
                    <ul class="nested">
                        <li>Black Tea</li>
                        <li>White Tea</li>
                        <li><span class="caret">Green Tea</span>
                            <ul class="nested">
                                <li>Sencha</li>
                                <li>Gyokuro</li>
                                <li>Matcha</li>
                                <li>Pi Lo Chun</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <script>
        var toggler = document.getElementsByClassName("caret");
        var i;

        for (i = 0; i < toggler.length; i++) {
            toggler[i].addEventListener("click", function () {
                this.parentElement.querySelector(".nested").classList.toggle("active");
                this.classList.toggle("caret-down");
            });
        }
    </script>

</body>

</html>

赞(0）回复(0）举报 2023-03-20

我来回答

css 网页中的嵌套下拉列表未显示

1条答案

相关问题

热门标签

最新问答