切换的嵌套列表中的链接不可点击

links in toggled nested list not clickable

本文关键字：链接 嵌套 列表      更新时间：2023-09-26

我完全卡住了，试了好几天来解决我的问题。下面您可以看到我正在使用的html结构。我通过JS插入嵌套列表。我的问题是我想显示Link1a和Link1b就像在这个小提琴。正如您在这里看到的，最后一个div的文本被嵌套的列表覆盖。

但在我的情况下，在网站上，我试图操纵链接是不可点击的。我想我漏掉了一个属性，但不知道是哪一个。

你能帮我吗?

<div id="main">
  <ul>
    <li style="display: inline-block; vertical-align: top; padding: 0px;">
      <a href="link1">Link1</a>
    </li>
    <li style="display: inline-block; vertical-align: top; padding: 0px;">
      <a href="#">Disabled link</a>
      <ul style="position: absolute; margin-top: 5px;" class="tohover">
         <li>
            <a href="#">Link1a</a>
         </li>
         <li>
           <a href="#">Link1b</a>
         </li>
      </ul>
    </li>
  </ul>
</div>


$(document).ready(function(){
  $("#main > ul > li").css({'display':'inline-block','vertical-align':'top','padding':'0px'});
  $("<ul class='tohover' style='display:none;'>
      <li><a href='#'>Link 1a</a></li>
      <li><a href='#'>Link 1a</a></li>
      </ul>").insertAfter("#main a[href$='link1']");
  $("#main a[href$='link1']").click(function(e){
    e.preventDefault();
    $(".tohover").toggle().css("position","absolute").css("margin-top","5px");
  });
});

我认为这是z-index的问题，只是试着设置:<ul class='tohover' style='display:none; z-index: 999;'>

您可以使用event.preventDefault();

的例子:

$("a").click(function(event) {
  event.preventDefault();
});

相关文章：