使用Treeview.js

Question

我有一个目的地列表，我使用 treeview.js 。我在<span></span>中添加了<li></li>标记，并调整了一点CSS以使其看起来更漂亮。我的目标是通过点击<span></span>标记来扩展列表。但是，无论我做什么，我都无法点击<span></span>标记。

我尝试添加display:block;和display:inline-block;，同时添加宽度和高度，但没有任何工作。

这是我的CSS：

    #tree li>span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:0px 6px;
    text-decoration:none;
    line-height: 22px;
    width: 40%;
    padding-left:20px;
    }

    /* TreeJS styling */

    .treeview, .treeview ul {
    list-style-type: none;
    overflow: hidden;
    }

    .treeview li {
    text-indent: 1%;
    margin-top:0.2em;
    padding:0.15em 0 0.5em 1.5em;
    line-height: 22px;
    background-repeat:no-repeat;
    background-size: 24px 24px;
    }

    .treeview li.contains-items {
    /*background-image: url('icons/arrow-left.png');*/
    } 

   .treeview li.contains-items:before {
    content:"\e081" !important;
    font-family:"Glyphicons Halflings";
    line-height:0.5;
    margin:10px;
    display:inline-block;
    margin-left: 0px !important;
    padding-left: 5px;
    }

    .treeview li.items-expanded:before {
    content:"\e082" !important;
    font-family:"Glyphicons Halflings";
    line-height:0.5;
    margin:10px;
    display:inline-block;
    margin-left: 0px !important;
    padding-left: 5px;
    }

    .treeview li.items-expanded {
    /*background-image: url('icons/arrow-down.png');*/
   }

.treeview>li:hover {
cursor: pointer;
background-size: 24px 24px;
}

.treeview span.has-node-icon {
text-indent: 2%;
margin-top:0.2em;
padding:0.15em 0 0.5em 2.0em;
line-height: 22px;
background-repeat:no-repeat;
background-size: 24px 24px;
}

.treeview span:not(span.has-node-icon):hover{
background-color: rgba(246, 246, 246, 0.7);
}

在treeview的js文件中没有进行任何更改。

这可能看起来像一个简单的＆＃39;问题，但我现在已经工作了几个小时。

修改 我创建了一个简单的 jsfiddle 。 但您也可以在行动中看到它 here 。

非常感谢任何帮助。非常感谢你！

Answer 1

Treeview.js可能只将点击绑定到<li>。也许你可以在没有<span>的情况下完成同样的事情，只需将相同的样式应用于<li>，如下所示：

.treeview>li { /* <-- previously .treeview span {... */
  text-indent: 2%;
  margin-top:0.2em;
  padding:0.15em 0 0.5em 2.0em;
  line-height: 22px;
  background-repeat:no-repeat;
  background-size: 24px 24px;
}