Question

我正在使用网站上的菜单，其中包含隐藏的子菜单，这些子菜单在单击父级li时应该会滑动。

一切正常，在单击子菜单链接时，我很难阻止子菜单滑动。

我无法更改html结构...

fyi我还必须阻止使用e.preventDefault（）打开我父母li的链接；

这是一个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);

    }

  });

有人可以帮我吗？

谢谢

Answer 1

使用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);

  }

});

防止对儿童使用li

1 个答案: