禁用<ul>问题中的<ul>链接
禁用<ul>问题中的<ul>链接
提问于 2017-01-27 13:08:02
基本上，我确实有一个嵌套列表的HTML代码块，如下所示：
<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> 使用它，我需要做的是，我想要检查li.level_1有一个<ul>，如果是，那么我需要禁用直接在li.level_1内的<a>链接。
这是我在jquery中尝试的方法，但它从列表中删除了所有a。
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}有人能告诉我怎么解决这个问题吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-01-27 13:11:26
您可以检查li是否有ul，并像这样禁用a。
$('.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>
Stack Overflow用户
发布于 2017-01-27 13:13:00
您可以设置这样的事件侦听器：
将id设置为顶级ul元素：
<ul id="top_level_ul">jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});替代(指针-事件)
还可以设置pointer-events:none以防止任何交互：
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});CSS
.noPointer {
pointer-events: none;
}Stack Overflow用户
发布于 2017-01-27 13:16:53
你必须从$('ul li')开始搜索链接
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}见以下示例：
<!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>
希望它能帮到你。再见。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41894705
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号