admin管理员组文章数量:1327676
I have a treeview structure created with css and jquery. To expand a node I want the user to click on a <span>
within the <li>
(it's an image) and not on the node itself.
So here is my HTML part :
<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>
Here's the JS part for the clikc event on span (but it doesn't work) :
$( '.tree li.parent > span.expand' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
However, the following code works but by clicking on the <a>
within the <li>
:
$( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
I need to expand the nodes by clicking on the span because when clicking on the node I need to redirect to another page to display its details.
Please see this jsfiddle that a created for this question.
So why the click event on span does not work ?
I have a treeview structure created with css and jquery. To expand a node I want the user to click on a <span>
within the <li>
(it's an image) and not on the node itself.
So here is my HTML part :
<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>
Here's the JS part for the clikc event on span (but it doesn't work) :
$( '.tree li.parent > span.expand' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
However, the following code works but by clicking on the <a>
within the <li>
:
$( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
I need to expand the nodes by clicking on the span because when clicking on the node I need to redirect to another page to display its details.
Please see this jsfiddle that a created for this question.
So why the click event on span does not work ?
Share Improve this question asked Apr 17, 2015 at 20:15 blackbishopblackbishop 32.7k11 gold badges59 silver badges83 bronze badges 1- 1 Just clean your opening and closing tags. I think you did some mess there. – Advicer Commented Apr 17, 2015 at 20:24
4 Answers
Reset to default 6The issue is with css. Tag a is overlapping your span. Replace padding with margin and everything will start working.
Upd.: Actually - remove display:block
from your rules for a
tag
fiddle: http://jsfiddle/8ucy1gjb/2/
You are missing a closing </li>
tag:
<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>
Instead of using padding
use margin
for this class
.tree li.parent > a {
padding: 0 0 0 28px;
}
replace it with :
.tree li.parent > a {
margin: 0 0 0 28px;
}
as it is now your a
tag overlays the span.expand
so it's not clickable.
Fiddle
in your CSS selector you have .tree li.parent > span.expand
. This selector is wrong for your markup. What this is looking for is
<div class="tree">
<ul>
<li class="parent">
<span class="expand"></span>
</li>
</ul>
</div>
That >
means direct child, which you don't have. Just remove that, and you should be fine.
$(".tree li.parent span.expand").on('click', function() {});
Edit As it was pointed out to me, I missed the top level <span class="expand">
. The click event would work for that top level, but wouldn't work on any of the inner ones. I would still remend changing the CSS selector if you'd like it to click through on all of them.
本文标签: javascriptspan onclick does not work jqueryStack Overflow
版权声明:本文标题:javascript - span onclick does not work jquery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742216183a2434606.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论