Question

当我将鼠标移动到子菜单上时，我正在尝试显示一个子菜单但是当我将鼠标移动到子菜单时它会消失，这对我来说没有意义。

我正在使用jquery这样做。

这是我的代码（缩写）：

function showSub(id) {
  $('#' + id).slideDown('fast');
}

function hideSub(id) {
  $('#' + id).slideUp('fast');
}

.menu li {
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .menu li a {
    text-decoration: none;
    color: #9B9A98;
    font-weight: 700;
    font-size: 13px;
  }
  .menu li a span {
    line-height: 100px;
    display: block;
    padding: 0 15px;
  }
  .menu li ul {
    margin: 0;
    padding: 0;
    background: rgba(3, 3, 3, 0.85);
    display: none;
    position: absolute;
  }
  .menu li ul li {
    margin: 0;
    padding: 10px 15px;
    list-style: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="index.php"><span>HOME</span></a>
  </li>
  <li onmouseover="showSub('atelier')" onmouseout="hideSub('atelier')">
    <a href="index.php?p=atelier"><span>ATELIER</span></a>
    <ul id="atelier">
      <li><a href="index.php?p=quem_somos"><span>QUEM SOMOS</span></a>
      </li>
    </ul>
  </li>
  <li>
    <a href="index.php?p=portfolio"><span>PORTFOLIO</span></a>
  </li>
</ul>

我不明白。由于子菜单位于li内，因此当鼠标悬停在子菜单上时，应保持子菜单可见。

我在这里做错了吗？

Answer 1

我宁愿纯粹用CSS做到这一点。

<强> CSS

#atelier {
  display:none;
}
.menu > li:hover #atelier{
  display:block;
}

不需要JS。 HTML保持不变。 Fiddle Here.

如果您想获得动画，可能需要尝试this或this之类的内容。

旁注 - 更好的做法是 NOT 在HTML中包含事件处理程序信息。要绑定事件，您可以使用addEventListener()（现代浏览器）或attachEvent()（某些旧IE版本）等方法。

使用jQuery，您将变得与浏览器无关，让jQuery在内部处理所有浏览器兼容性。所以你可以做.. ..

$("YOUR_SELECTOR_HERE").on("EVENT_TYPE", function(event){
    //your event handler with the "event" details. 
})

可以使用.on的不同方式。 Here

Answer 2

使用此jQuery代码段。

$(document).ready(function() {
    $(".menu li").hover(
        function() {
            $(this).children("#atelier").slideDown();
        },
        function() {
            $(this).children("#atelier").slideUp();
        }
    );
});

见这里： https://jsfiddle.net/t884g25b/

维护子菜单可见

2 个答案: