Question

我正在尝试创建Bootstrap树视图，并将项目划分为类别，每个类别具有单独的上下文菜单。例如，我可以将“鲜花”和“汽车”作为树项，并且当用户右键单击“鲜花”时，可以有一个菜单（“颜色”，“气味”），而对于汽车，则有另一个菜单（“引擎功率”， “价格”）。

我不太擅长jQuery，但我想我需要将“类”与类别节点关联（使用html“ class”标签或其他内容），然后将用于右键单击的侦听器与这些类相关联，并取决于类名称，以特定的鼠标坐标显示不同的菜单内容。

问题是：我的方法正确吗？如果是这样，那么在使用JSON数据填充树时如何为Boostrap Tree节点指定类名？

很抱歉，谢谢您。

Answer 1

仅供参考：右键单击通常保留给上下文菜单，而不是导航。

关于Bootstrap：

用Bootstrap术语来说，“树视图”只是一个垂直导航。
和BS Navs使用标准的“单击”进行导航，因此，IMO最好不要更改该功能。

问题：菜单系统是固定的，编程的还是动态的？

如果已修复，则可以在html中构建此菜单系统，而只需编写交互代码即可。
如果它是程序性的，则意味着导航条目基于某种分层数据结构，您将不得不遍历数据并构建菜单，以使最终的html符合以下示例。
如果它是动态的，则意味着菜单系统会根据用户的选择进行更改，那么我要假设的情况就完全不同了。

此示例基于您的帖子的垂直导航是固定菜单系统。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<ul class="nav flex-sm-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Some item</a>
  </li>
  <li class="nav-item dropdown">
    <div class="btn-group dropright">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Flowers</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Color</a>
        <a class="dropdown-item" href="#">Smell</a>
        <a class="dropdown-item" href="#">Something else</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </li>
  <li class="nav-item dropdown">
    <div class="btn-group dropright">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Cars</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Price</a>
        <a class="dropdown-item" href="#">Engine</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

如何将类属性添加到Bootstrap树视图项？

1 个答案: