Блог

Я полностью застрял и несколько дней пытался решить свою проблему. Ниже вы видите 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();
});