javascript - 跨度 onclick 不起作用 jquery

Question

我有一个用 css 和 jquery 创建的 TreeView 结构。要展开节点，我希望用户单击 <span>在 <li> 内(它是一个图像)而不是在节点本身上。

所以这是我的 HTML 部分:

<div class="tree">      
<ul>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
    <ul>
        <li><span class="expand"></span><a>Level 2</a></li>
        <li><span class="expand"></span><a>Level 2</a></li>
        <li><span class="expand"></span><a>Level 2</a></li>
        <li><span class="expand"></span><a>Level 2</a></li>
    </ul>
</li>
<li class="parent active"><span class="expand"></span><a>Level 1</a>
    <ul>
        <li class="parent active"><span class="expand"></span><a>Level 2</a>
          <ul>
             <li class="parent active"><span class="expand"></span><a>Level 3</a>
                <ul>
                   <li><a>Level 4</a></li>
                </ul>
          </ul>
        </li>
        <li><span class="expand"></span><a>Level 2</a></li>
    </ul>
</li>
</ul>
</div>

这是 span 上 clikc 事件的 JS 部分(但它不起作用):

$( '.tree li.parent > span.expand' ).click( function( ) {
    $( this ).parent().toggleClass( 'active' );
    $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});

但是，以下代码可以通过单击 <a> 来运行在 <li> 内:

 $( '.tree li.parent > a' ).click( function( ) {
    $( this ).parent().toggleClass( 'active' );
    $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
 });

我需要通过单击 span 来展开节点，因为单击节点时我需要重定向到另一个页面以显示其详细信息。

请看这个jsfiddle这是为这个问题创建的。

那么为什么 span 上的点击事件不起作用？

Answer 1

问题出在 css 上。标签 a 与您的跨度重叠。用边距替换填充，一切都会开始工作。

更新:实际上 - 从 a 标签的规则中删除 display:block fiddle :http://jsfiddle.net/8ucy1gjb/2/