Question

我在jquery中有以下代码来显示子菜单的项目：

$(document).ready(function(){
  $(".menu > .menu-item").mouseenter(function(){
    if($(this).has(".sub-menu").length){
      $(".sub-menu",this).fadeIn(500);
      $(".sub-menu",this).css("margin","0 40px");
      $(".sub-menu",this).css("position","fixed");
      $(".sub-menu",this).css("z-index","10");
    }
  })
  .mouseleave(function(){
    if($(this).has(".sub-menu").length){
      $(".sub-menu",this).fadeOut(500);
    }
  });
});

当子菜单元素没有其他子元素时，它可以正常工作，但是当我添加子元素时，它们同时显示。

我想只显示子元素，如果任何子元素中有更多子元素，只有当鼠标位于主子元素上时才显示它们。

这是我向菜单添加子元素时自动生成的代码：

<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">
  <a href="http://localhost:8080/testoir/sample-page/">Audiologia</a>
  <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
    <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17"><a href="#">option1</a>
      <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
        <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">option2</a></li>
      </ul>
    </li>
  </ul>
</li>

我该怎么做？

非常感谢你的时间和帮助。

Answer 1

$(".sub-menu", this)将匹配任何深度的子菜单。如果您只想要直系孩子，请使用$(this).children(".sub-menu")。

＆＃13;

$(document).ready(function() {
  $(".menu > .menu-item").mouseenter(function() {
      if ($(this).children(".sub-menu").length) {
        $(this).children(".sub-menu")
          .fadeIn(500)
          .css({
            "margin": "0 40px",
            "position": "fixed",
            "z-index": "10"
          });
      }
    })
    .mouseleave(function() {
      if ($(this).children(".sub-menu").length) {
        $(this).children(".sub-menu").fadeOut(500);
      }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">
    <a href="http://localhost:8080/testoir/sample-page/">Audiologia</a>
    <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
      <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17"><a href="#">option1</a>
        <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
          <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">option2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

在纯Javascript中获取具有相同类名的元素数组：

var elements = document.getElementsByClassName('className');

获取上面指定类名的第一个元素：

var element = elements[0];

如果你想获得第二个元素，那就是：

var element = elements[1];

如何仅选择具有相同类名的元素列表的第一个元素

2 个答案: