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

有一个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;
}

Answer 2

据我所知，没有真正的方法可以在树项目之间建立分隔符。

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

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

我可以给您更多提示：

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

祝你好运

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

2 个答案: