I have a jsp that generates the following html structure:
<ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_727">
<li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_726">
<i class="fa fa-plus"></i> <i class="fa fa-folder"></i> Prueba 1
<ul class="files" style="display: block;">
<li class="file"> <a href="/documents/10184/10675/welcome_tools" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_tools </a> </li>
<li class="file"> <a href="/documents/10184/10675/welcome_learn" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_learn </a> </li>
<li class="file"> <a href="/documents/10184/10675/welcome_cube" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_cube </a> </li>
<li class="file"> <a href="/documents/10184/10675/welcome_community" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_community </a> </li>
</ul>
<ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_725" style="display: block;">
<li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_724">
<i class="fa fa-folder-open-o"></i> Sub 1
<ul class="files" style="display: block;">
<li class="file"> <a href="/documents/10184/10707/helpful_links_for_using_liferay_portal" target="_blank" class="link"> <i class="fa fa-file"></i> helpful_links_for_using_liferay_portal </a> </li>
</ul>
<ul class="folders" style="display: block;" id="yui_patched_v3_11_0_1_1410259364795_798">
<li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_797">
<i class="fa fa-folder-open-o"></i> Sub Sub 1
<ul class="folders" style="display: block;"> </ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And i have the following javascript
$("li.folder")
.css("cursor", "pointer")
.on("click", function(){
$this = $(this);
$this.find("ul.files,ul.folders").toggle(200);
return false;
});
For a tree-like functionality.
The problem is whenever i click an a it fires the li.folder event. How can i make it so that the link behaves as a link.
Codepen link: http://codepen.io/anon/pen/Hokgt
You can just exclude the anchor
$("li.folder")
.css("cursor", "pointer")
.on("click", function(e){
if ( ! $(e.target).is('a') ) {
$(this).find("ul.files,ul.folders").toggle(200);
}
return false;
});
or go the other way, and stop the propagation
$("li.folder a").on('click', function(e) {
e.stopPropagation();
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加