我有一个数据列表，我将其转换为 Ul 和 li 的列表，现在我希望这个列表在 JSP 中显示为树

i have a list of data which i converted to list of Ul and li , now i want this list to displayed as tree in jsp

本文关键字：列表 我希望 JSP 显示 数据 有一个 转换 li Ul      更新时间：2023-09-26

我已经将我的列表数据转换为无序列表，现在我希望它们显示为树。

我的要求是单击图标即可展开/折叠。同样，当我单击文本时，它应该重定向到我引用的页面。

找到了一些解决方案，其中父级不充当超链接，而是充当展开/折叠。

这是我从数组列表中创建的 UL 和 li 组合，现在我希望这是一棵树。注意：此处的所有文本均为超链接

  • 公司
    • 工人
      • 米歇尔
      • 尼基尔
      • 安詹
        • 柴特拉
          • 抓到25
            • 第一
              • 第二
                • 第三

请告诉我接下来的步骤，提前谢谢。

有很多

方法可以做到这一点，但这里有一个快速的例子来帮助你入门。

由于我们将图标追加到列表项的外边缘，因此它允许您仍将实际链接文本用作链接。

有关简短的解决方案，请参见下文：

.JS：

$('ul li').each(function(e) {
    // Does the list item have a nested UL?
    var children = $(this).children('ul').length;
   // If so, add an arrow icon.
   if(children)
       $(this).append('<div class="arrow">+</div>');
})
$('.arrow').click(function() {
    // Add or remove 'open' class, which shows or hides the element.
    $(this).parent('li').children('ul').toggleClass('open');
})

.HTML：

<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a>
  <ul>
    <li><a href="">4</a></li>
    <li><a href="">5</a>
      <ul>
        <li><a href="">6</a></li>
        <li><a href="">7</a></li>
        <li><a href="">8</a></li>
      </ul>
    </li>
    <li><a href="">9</a>
      <ul>
        <li><a href="">10</a></li>
      </ul>
    </li>
  </ul>
</li>
</ul>

.CSS：

li {
  position: relative;
}
ul ul {
  display: none;
}
.arrow {
  position: absolute;
  right: 0;
  top: 0;
}
.open {
  display: block;
}

这会将可单击的图标附加到列表项（如果它具有 UL 子项）。然后它为所述图标添加一个单击处理程序以隐藏/显示列表元素。我认为这就是你所追求的？

相关文章：