Как создать дополнительную папку на странице?

Question

Я не знаю, как подойти к этому. Я хотел бы иметь возможность сделать следующее: у меня есть значок для папки, которая ссылается на другую страницу. Когда пользователь нажимает на значок, вместо перехода на страницу под пиктограммой папки появляется подпапка (ы), а когда пользователь нажимает на одну из этих папок, она направляет пользователя на страницу.

Ниже то, что я сделал orignally:

<h4> 
    <a href="CalMediConnect_DMgmt.cfm"> 
    <img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"> 
    &nbsp;Disease Management 
    </a> 
</h4> 
<br /><br /> 

UPDATE

Я попытался следующие, и это, кажется, не работает:

Ниже приведен сценарий:

var tree = document.querySelectorAll('ul.tree a:not(:last-child)'); 
for(var i = 0; i < tree.length; i++) { 
    tree[i].addEventListener('click', function(e) { 
    var parent = e.target.parentElement; 
    var classList = parent.classList; 
    if(classList.contains("open")) { 
     classList.remove('open'); 
     var opensubs = parent.querySelectorAll(':scope .open'); 
     for(var i = 0; i < opensubs.length; i++) { 
     opensubs[i].classList.remove('open'); 
     } 
    } else { 
     classList.add('open'); 
    } 
    }); 
} 

CSS:

ul.tree li { 
    list-style-type: none; 
    position: relative; 
} 

ul.tree li ul { 
    display: none; 
} 

ul.tree li.open > ul { 
    display: block; 
} 

ul.tree li a { 
    color: #4284B0; 
    text-decoration: none; 
} 

ul.tree li a:before { 
    height: 1em; 
    padding: .1em; 
    font-size: .8em; 
    display: block; 
    position: absolute; 
    left: -1.3em; 
    top: .2em; 
} 
.margin-left { 
    margin-left: -15px; 
} 

И HTML:

<ul class="tree margin-left"> 
    <li> 
    <h4> 
     <a href="#"> 
     <img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"> 
     &nbsp;Disease Management 
     </a> 
    </h4> 
    <ul> 
     <li> 
     <h5> 
      <a href="CalMediConnect_DMgmt.cfm"> 
      <img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"> 
      &nbsp;Disease Management 
      </a> 
     </h5> 
     </li> 
    </ul> 
    </li> 
</ul> 

Любая помощь будет оценена.

Answer 1

Вот очень основной пример построен с JQuery ...

https://jsfiddle.net/kennethcss/8b4e6o42/

$('.folder').on('click', function(e) { 
 
    var folder = $(this).find('.sub-folder'); 
 

 
    if (e.target !== this) return; 
 

 
    if(folder.hasClass('hidden')) { 
 
    folder.removeClass('hidden'); 
 
    } else { 
 
    folder.addClass('hidden'); 
 
    } 
 
});

.folder { 
 
    cursor: pointer; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<ul class="container"> 
 
    <li class="folder">Primary 
 
    <ul class="sub-folder hidden"> 
 
     <li>Secondary</li> 
 
     <li>Secondary</li> 
 
     <li>Secondary</li> 
 
    </ul> 
 
    </li> 
 
    <li class="folder">Primary 
 
    <ul class="sub-folder hidden"> 
 
     <li>Secondary</li> 
 
     <li>Secondary</li> 
 
     <li>Secondary</li> 
 
    </ul> 
 
    </li> 
 
    <li class="folder">Primary 
 
    <ul class="sub-folder hidden"> 
 
     <li>Secondary</li> 
 
     <li>Secondary</li> 
 
     <li>Secondary</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Конечно, вы можете стиль как бы вы хотели; этот пример просто демонстрирует, как вы можете структурировать свои HTML, CSS и JS, чтобы создать простую структуру в виде папки.

Gist

https://gist.github.com/kennethcss/8db1dc3326917c77846e84d263beb67d