内跨 <li> 使用Treeview.js可点击

Question

我有一个目的地列表，在其中使用treeview.js 。 我在<li></li>内添加了<span></span>标记，并调整了一些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文件中未进行任何更改。

这似乎是一个“简单”的问题，但我已经研究了几个小时 。

编辑：我创建了一个简单的jsfiddle 。 但是您也可以在这里看到它的实际效果。

非常感谢您的帮助。 非常感谢你！

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; }