span onclick不起作用jquery

Question

我有一个用css和jquery创建的树视图结构.要展开一个节点我想用户点击一个<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>

这是跨度上的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' );
 });

我需要通过单击跨度来扩展节点,因为单击节点时我需要重定向到另一个页面以显示其详细信息.

请看这个为这个问题创建的jsfiddle.

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

Answer 1

问题在于CSS.标记a与您的范围重叠.用边距替换填充,一切都将开始工作.

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