Question

我目前正在使用jsTree来显示某些（列表）项目。我如何才能使这种界面在使用触摸功能的设备上正常工作？

我遇到的问题是<li>太小而无法触摸以实现触摸功能。我尝试编辑<li>的高度，但这似乎破坏了树：

$(document).ready(function() {
  $.jstree.defaults.core.themes.variant = "large";
  // 6 create an instance when the DOM is ready
  $('#jstree').jstree({
    "plugins": ["wholerow"]
  });
  // 7 bind to events triggered on the tree
  $('#jstree').on("changed.jstree", function(e, data) {
    console.log(data.selected);
  });
  // 8 interact with the tree - either way is OK
  $('button').on('click', function() {
    $('#jstree').jstree(true).select_node('child_node_1');
    $('#jstree').jstree('select_node', 'child_node_1');
    $.jstree.reference('#jstree').select_node('child_node_1');
  });
});

#jstree > ul > li {
  /* height: 50px ; */  /* <-- Not workoing */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree">
  <!-- in this example the tree is populated from inline HTML -->
  <ul>
    <li>Root node 1
      <ul>
        <li id="child_node_1">Child node 1</li>
        <li data-jstree='{"icon":"//jstree.com/tree.png"}'>Child node 2</li>
      </ul>
    </li>
    <li>Root node 2</li>
  </ul>
</div>
<button>demo button</button>

JSFiddle

有人会碰巧知道如何编辑jsTree的外观吗？

如何将交互式树变成触摸友好的界面？

0 个答案: