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/

Answer 2

您错过了结束</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>

Answer 3

而不是使用padding将margin用于此类

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

将其替换为：

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

现在您的a标记覆盖了span.expand，因此无法点击。

Fiddle

Answer 4

你的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">。 click事件适用于该顶级，但不适用于任何内部事件。如果您希望更改CSS选择器，我仍然建议您更改它们。

span onclick不起作用jquery

4 个答案: