Disable `<a>` link inside <ul> issue
Question
Basically I do have a block of HTML code for nested list as below:
<ul>
<li class="level_1">
<a href="level1.html">Insulated And Extruded</a>
<ul class="level_2">
<li><a href="">TE77</a></li>
<li><a href="">TE78</a></li>
<li><a href="">T77</a></li>
<li><a href="">TS77</a></li>
</ul>
</li>
<li class="level_1"><a href="">Grille Type Rolling</a></li>
<li class="level_1"><a href="">PVC High Speed Doors</a></li>
<li class="level_1"><a href="">Swinging doors</a></li>
</ul>
Using this what I need to do is, I want to check li.level_1 has a <ul> , if so then I need to disable <a> link link which is directly inside li.level_1 .
This is how I tried it in jquery, but its removing all a from the list.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Can anybody tell me how to fix that issue?
4 answers
solution1
6 ACCPTED 2017-01-27 13:11:26
You can check if li has ul and disable a like this.
$('.level_1:has(ul) > a').removeAttr('href')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="level_1"> <a href="level1.html">Insulated And Extruded</a> <ul class="level_2"> <li><a href="">TE77</a></li> <li><a href="">TE78</a></li> <li><a href="">T77</a></li> <li><a href="">TS77</a></li> </ul> </li> <li class="level_1"><a href="">Grille Type Rolling</a></li> <li class="level_1"><a href="">PVC High Speed Doors</a></li> <li class="level_1"><a href="">Swinging doors</a></li> </ul>
solution2
1 2017-01-27 13:13:00
You could set an event listener like this:
Set an id to the top level ul element:
<ul id="top_level_ul">
jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});
ALTERNATIVE (pointer-events)
You can also set pointer-events:none to prevent any interaction:
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});
CSS
.noPointer {
pointer-events: none;
}
solution3
0 2017-01-27 13:16:53
You have to start your "search" for links from $('ul li')
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
See following example:
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <ul> <li class="level_1"> <a href="level1.html">Insulated And Extruded</a> <ul class="level_2"> <li><a href="">TE77</a></li> <li><a href="">TE78</a></li> <li><a href="">T77</a></li> <li><a href="">TS77</a></li> </ul> </li> <li class="level_1"><a href="">Grille Type Rolling</a></li> <li class="level_1"><a href="">PVC High Speed Doors</a></li> <li class="level_1"><a href="">Swinging doors</a></li> </ul> <script> var $node = $('ul li'); if($node.has('ul').length) { $node.find('ul li > a').removeAttr('href'); } </script> </body> </html>
I hope it helps you. Bye.
solution4
0 2017-01-27 13:18:47
$(document).ready(function(){
$('.level_2').siblings('a').remove();
});
UPD
$(document).ready(function(){
$('.level_2').siblings('a').css('pointer-events','none');
});
or
$(document).ready(function(){
$('.level_2').siblings('a').attr('onclick','return false');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.