Question

我完全陷入困境，并尝试了几天来解决我的问题。下面你看到我正在使用的html结构。我正在通过JS插入嵌套列表。我的问题是我想在这个fiddle中显示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");
  });

});

Answer 1

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

Answer 2

您可以使用event.preventDefault();

示例：

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

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

2 个答案: