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?

Answer 1

您可以检查li是否ul并禁用此a。

＆＃13;

$('.level_1:has(ul) > a').removeAttr('href')

＆＃13;

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

＆＃13;

Answer 2

您可以像这样设置一个事件监听器：

将id设置为顶级ul元素：

<ul id="top_level_ul">

的jQuery

$(document).on('click', '#top_level_ul > li > a', function(e) {
   e.preventDefault();
});

ALTERNATIVE（指针事件）

您还可以设置pointer-events:none以阻止任何互动：

$('#top_level_ul > li > a').each(function() {
   $(this.addClass('noPointer'));
});

CSS

.noPointer {
   pointer-events: none;
}

Answer 3

你必须开始你的搜索＆＃34;来自$('ul li')

的链接

var $node = $('ul li');
if($node.has('ul').length) {
  $node.find('ul li > a').removeAttr('href'); 
}

参见以下示例：

＆＃13;

<!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>

＆＃13;

我希望它可以帮到你。再见。

Answer 4

Link

  $(document).ready(function(){
  $('.level_2').siblings('a').remove();
});

UPD

$(document).ready(function(){
  $('.level_2').siblings('a').css('pointer-events','none');
});

或

$(document).ready(function(){
  $('.level_2').siblings('a').attr('onclick','return false');
});

禁用“<a>` link inside </a> <ul> <a> issue

4 个答案: