Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Study</title>
- <style>
- #PClist {
- width: 350px;
- font-size: 20px;
- line-height: 30px;
- background-color: #C8FFEE;
- margin-left: 20px;
- }
- li a:hover {
- font-weight: bold;
- text-shadow: 1px 1px 2px #64B099;
- }
- </style>
- </head>
- <body>
- <div id="PClist">
- <ul class="list" id="list">
- <li>
- <a>This PC</a>
- <ul>
- <li>
- <a>Local Disk (C:)</a>
- <ul>
- <li><a>Program Files</a></li>
- <li><a>Users</a>
- <ul>
- <li><a>UserA</a>
- <li><a>UserB</a>
- <li><a>UserC</a>
- </ul>
- </li>
- <li><a>Windows</a></li>
- </ul>
- </li>
- </ul>
- <ul>
- <li>
- <a>Local Disk (D:)</a>
- <ul>
- <li><a>New Folder 1</a></li>
- <li><a>New Folder 2</a></li>
- <li><a>New Folder 2</a></li>
- </ul>
- </li>
- </ul>
- <ul>
- <li><a>Local Disk (E:)</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <script>
- 'use strict'
- document.getElementById('list').addEventListener('click', (event) => {
- let childList = event.target.parentNode.querySelectorAll('ul');
- if (childList) {
- for (let child of childList) {
- child.hidden = !child.hidden;
- }
- }
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement