предотвратить слайд-тоггл по детской ссылке - PullRequest
Новая
       51

предотвратить слайд-тоггл по детской ссылке

0 голосов
/ 17 апреля 2019

Я использую меню на своем веб-сайте со скрытыми подменю, которые должны скользить при нажатии на родительский li.

Все работает нормально, но у меня возникают проблемы с тем, чтобы не открывать слайд подменю при нажатии на ссылку подменю.

Я не могу изменить структуру HTML ...

fyi Мне также пришлось запретить открывать ссылку моего родителя li с помощью e.preventDefault ();

вот jsfiddle: https://jsfiddle.net/e6a83run/

вот мой код: 

<div class="menu-menu_header-container"><ul id="menu-menu_header" class="menu"><li id="menu-item-113" class="no_link menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-113"><a href="/nous-connaitre/">Nous connaître</a>
<ul class="sub-menu">
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-114"><a href="/pionnier-radiologie-liberale-vidi" aria-current="page">Manifeste</a></li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="/nos-chiffres-cles/">Nos chiffres clés</a></li>
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="/centres-imagerie-medicale">Nos implantations</a></li>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117"><a href="/nous-connaitre/notre-charte/">Notre charte</a></li>
<li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118"><a href="/nous-connaitre/notre-gouvernance/">Gouvernance</a></li>
<li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="/nous-connaitre/notre-histoire/">Notre histoire</a></li>
</ul>
</li>
<li id="menu-item-140" class="menu-item menu-item-type-post_type_archive menu-item-object-examens menu-item-has-children menu-item-140"><a href="/examens/">Vos examens</a>
<ul class="sub-menu">
<li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-examens menu-item-141"><a href="/echographie/">Échographie et doppler</a></li>
<li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-examens menu-item-142"><a href="/irm/">IRM</a></li>
<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-examens menu-item-143"><a href="/mammographie/">Mammographie</a></li>
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-examens menu-item-144"><a href="/osteodensitometrie/">Ostéodensitométrie</a></li>
<li id="menu-item-145" class="menu-item menu-item-type-post_type menu-item-object-examens menu-item-145"><a href="/radiographie/">Radiographie</a></li>
<li id="menu-item-146" class="menu-item menu-item-type-post_type menu-item-object-examens menu-item-146"><a href="/scanner/">Scanner</a></li>
</ul>
</li>

и мой JQuery 

$('#menu-item-127 a').first().click(function(e) {

    e.preventDefault();

  });
  $('#menu-item-113 a').first().click(function(e) {

    e.preventDefault();

  });
  $('#menu-item-140 a').first().click(function(e) {

    e.preventDefault();

  });

  $("#menu-menu_header li").not(".sub-menu li").click(function(){

    var clicked = $(this);

    if ( clicked.find(".sub-menu").length > 0 ) {

      clicked.find(".sub-menu").slideToggle(150);

      $("#menu-menu_header li").not(clicked).find(".sub-menu").slideUp(150);

    }

  });

Кто-нибудь может мне помочь с этим?

спасибо

1 Ответ

0 голосов
/ 17 апреля 2019

Использование children (), потому что оно «перемещается только на один уровень вниз по дереву DOM» 

$("#menu-menu_header").children().click(function(){

var clicked = $(this);

if ( clicked.children(".sub-menu").first().length > 0 ) 
  {

  clicked.children(".sub-menu").first().slideToggle(150);

  $("#menu-menu_header").children().not(clicked).find(".sub-menu").slideUp(150);

  }

});
...