javascript - 如何在页面上创建子文件夹？

Question

我不知道如何处理这个问题。我希望能够执行以下操作:我有一个链接到另一个页面的文件夹图标。当用户单击图标而不是转到页面时，文件夹图标下方会出现一个子文件夹，当用户单击其中一个文件夹时，它会将用户定向到页面。

下面是我最初做的:

<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 />

更新

我试过以下方法，但似乎不起作用:

脚本如下:

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 以创建一个简单的类似文件夹的结构。

要点

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