在花式树中添加水平分隔符/边框

Question

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

    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

据我所知，实际上没有办法在树项之间进行分隔。

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

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

我可以给你一些提示：

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

祝你好运

Answer 2

有一个模仿手风琴外观和感觉的 Fancytree 演示，只需添加自定义 CSS 规则： 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;
}