CODEWITHSUNDEEP
javascriptjqueryhtml
user3733831
user3733831

Reputation: 2926

Disable `<a>` link inside <ul> issue

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?

Upvotes: 4

Views: 1448

Answers (4)

Choo Hwan
Choo Hwan

Reputation: 416

Link

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

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

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;
}

Upvotes: 1

Alessandro
Alessandro

Reputation: 4472

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.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 6

Related Questions