span onclick无法正常工作jquery

我有一个用css和jquery创建的treeview结构。要展开节点，我希望用户单击<li>（它是一个图像）内的<span>，而不是节点本身。span onclick无法正常工作jquery

因此，这里是我的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>

这里的JS部分上跨度clikc事件（但它不工作）：

$('.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'); 
});

I N通过点击跨度来扩展节点，因为当点击节点时，我需要重定向到另一个页面来显示它的细节。

请参阅为此问题创建的此jsfiddle。

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

来源

2015-04-17 blackbishop

只需清理您的开启和关闭标签。我认为你在那里做了一些混乱。 – Advicer

这个问题是与CSS。标签a与您的跨度重叠。用余量替换填充，一切都将开始工作。

UPD：其实 - 删除您的规则display:block为a标签小提琴：http://jsfiddle.net/8ucy1gjb/2/

来源

2015-04-17 20:21:31

谢谢你的回复。这是问题所在。 – blackbishop

很棒的发现@谢谢！ –

在您的CSS选择器中您有.tree li.parent > span.expand。这个选择器对于你的标记是错误的。这是寻找的是

<div class="tree"> 
    <ul> 
    <li class="parent"> 
     <span class="expand"></span> 
    </li> 
    </ul> 
</div>

>这意味着直接的孩子，你没有。只要删除它，你应该没问题。

$(".tree li.parent span.expand").on('click', function() {});

编辑正如有人向我指出，我错过了顶级<span class="expand">。点击事件可以用于顶层，但不适用于任何内部。如果您希望点击全部CSS选择器，我仍然会建议您更改CSS选择器。

来源

2015-04-17 20:21:04 jeremywoertink

我实际上认为“>”对于OP的html是可以的。 OP在'li.parent'下立即有'span.expand'。 –

哦，你是对的！我其实并没有看到那个隐藏在那里的人，我会编辑。 – jeremywoertink

你缺少一个右</li>标签：

<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> 
      </li> <!-----I Was Missing!--> 
      </ul> 
     </li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
    </ul> 
</li> 
</ul> 
</div>

来源

2015-04-17 20:26:46

你是对的，但它并没有完全解决问题。它适用于2级和3级，但不适用于1级。 – blackbishop

这回答了您的问题“那么为什么跨度上的点击事件不起作用？” –

@TahaPaksu我已经添加了缺失的标签，但仍然与级别1的节点具有相同的概率。所以它并没有完全回答我的问题 – blackbishop

而不是使用padding使用margin为

该类

.tree li.parent > a { 
    padding: 0 0 0 28px; 
}

replac随着电子商务的：

.tree li.parent > a { 
    margin: 0 0 0 28px; 
}

，因为它是现在你的a标签覆盖在span.expand所以它不是点击。

Fiddle

来源

2015-04-17 20:29:06

span onclick无法正常工作jquery

回答

相关问题