ссылки в переключаемом вложенном списке не являются интерактивными

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

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

});
  

Комментарии:

1. Просто для проверки, вы хотите, чтобы Link1a и Link1b отключались при нажатии на ссылку Отключить, это правильно?

2. Да, хорошо. Link1a и Link1b отображаются только тогда, когда я нажимаю на отключенную ссылку. Они перегружены. Но когда я впервые нажимаю на отключенную ссылку, они отображаются, но не имеют никакой функциональности, которая мне нужна.

Ответ №1:

Я думаю, что это проблема с z-index просто попытайтесь установить: <ul class='tohover' style='display:none; z-index: 999;'>

Ответ №2:

Вы можете использовать event.preventDefault();

Пример:

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

Комментарии:

1. Привет, я уже использую эту функцию, чтобы отключить отключенную ссылку для переключения Link1a и Link1b. Но эти две ссылки не обладают функциональностью ссылок. Я не могу щелкнуть по ним.