Блог

Главная - Вопросы по программированию - Как предотвратить открытие ссылки во вложенном , если имеет класс

Как предотвратить открытие ссылки во вложенном , если имеет класс

#javascript #jquery

Вопрос:

как предотвратить открытие ссылки, если родительский li имеет класс: имеет-меню ? он должен работать для всех вложенных уровней

в приведенном ниже примере только Sub Sub cat 1/1 и Sub cat 1/2 должны открывать ссылку , но если я заставлю ее работать, то сверну с и — сломается, как объединить как свернуть, так и открыть ссылку, только если у li нет класса: есть-меню

 $('li').click(function(e){

      if ($(this).hasClass('has-menu')) {

          e.preventDefault();
          e.stopPropagation();

          $(this).children("div").children("ul").toggleClass("menu-close");

          $(this).toggleClass("menu-open");
      }
    }) 
 ul{
    padding: 0px;
    list-style: none;
  }

  ul li{
    padding: 5px 0;
  }

  ul li a{
    width: 100%;
    display: inline-block;
  }

  .menu-close{
    display: none; 
   /*background-color:red;*/
  }

  /* Main menu */
  .menu-main{
    width: 250px;
  }
  .menu-main li{
    position: relative;
  }

    .has-menu:before{
      content: ' ';
      position: absolute;
      right: 0;
    }

    .has-menu.menu-open:before{
      content: '-' !important;
    } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-main">
  <li class="has-menu">
    Test 1
    <div class="menu-wrapper">
      <ul class="menu-child menu-close">
        <li class="has-menu">
          <a href="https://www.google.com" target="_blank">Sub cat 1/1</a>
          <div class="menu-wrapper">
            <ul class="menu-subchild menu-close">
              <li>
                <a href="https://www.google.com" target="_blank">Sub Sub cat 1/1</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <ul class="menu-child menu-close">
        <li>
          <a href="https://www.google.com" target="_blank">Sub cat 1/2</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

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

1. вы также пробовали метод .parent ()?

2. Используйте e.stopImmediatePropagation() вместо этого.

3. @ArRakin ничего не изменилось, все та же проблема

Ответ №1:

 .has-menu>a{
  pointer-events: none;
}

Попробуй это.
просто отключите события указателя на тегах привязки, у которых есть родитель с class .has-меню

Метки: ,