在fancytree中添加水平分隔符/边框

Question

我正在使用fancytree创建导航菜单，并且需要添加边框/水平分隔符。 我尝试添加fancytree扩展名，它允许选择整行，然后添加以下内容以将css应用于init事件：

    init: function (event, data) {
                  jQuery("span.fancytree-title").css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});
}

结果是：

行之间需要有一个水平分隔符。 我已经研究了在fancytree上呈现的标记，但是找不到覆盖整个行的单个元素。 任何建议都会有所帮助。

注意：要删除左侧的刻度，我已完成以下操作：

    jQuery(".fancytree-expander").css('background', 'none');

这样可以消除左侧的可折叠刻度线，如果有更好的方法，请提出建议。

Answer 1

仅通过添加自定义CSS规则，就可以模拟手风琴外观的Fancytree演示： http ://wwwendt.de/tech/fancytree/demo/#sample-accordion.html

这不正是你问什么，但可能是一个足够好的出发点：

/* Display top level nodes as accordion header. */
ul.fancytree-container >li >.fancytree-node span.fancytree-title {
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  margin: 0;
  background-color: #ddd;
  border: 1px solid #bbb;
  font-weight: 550;
}
/* Hide  expanders for top-level nodes */
ul.fancytree-container >li >.fancytree-node .fancytree-expander {
  display: none;
}
/* Don't indent level-2 nodes */
ul.fancytree-container >li >ul {
  padding-left: 0;
}

Answer 2

据我所知，还没有一种在树项目之间建立分隔符的方法。

但是，您可以创建一个模仿它的样式。 我想到了几个解决方案：

• 在渲染节点的过程中，在元素的顶部或底部渲染<hr />元素
• 而不是使用border-width, border-color and border-style ，而是使用border-width, border-color and border-style border-top或border-bottom变体。 在这种情况下，您可能不得不对边距和填充感到困惑
• 取走项目之间的边距，并用填充替换它。 然后将边框宽度设为原始值的一半。 由于两条线是相对绘制的，因此它们看起来像是一条线

我可以为您提供更多提示：

• 避免使用jQuery设置CSS规则。 而是制作一个单独的CSS文件。 这将提高可重用性
• 不知道您是否已经拥有此链接： http : //www.wwwendt.de/tech/fancytree/doc/jsdoc/

祝好运