鼠标悬停在菜单项上时子菜单不保持打开状态

Question

我有一个网页，其中有导航链接。在悬停某些导航链接时，我想打开一个单独的菜单。我已经设法完成了。我的问题是，当我将鼠标悬停在特定导航链接上时，子菜单会显示，但是当我尝试单击子菜单中的墨水时，它会消失。

这是我的代码 .ascx：

<div class="navigation">
    <h4 id="home"><a href="../Home.aspx">Home</a></h4>
    <h4 id="gallery"><a href="#">Gallery</a></h4>
        <div class="galList">
            <h4 id="newGal"><a href="#">New</a></h4>
                <div class="galNewList">
                    <h4><a href="#">Profile pictures</a></h4>
                    <h4><a href="#">Backgrounds</a></h4>
                </div>
            <h4 id="refundTick"><a href="#">Delete</a></h4>
        </div>
    <h4 id="about"><a href="#">About</a></h4>
</div>

.js

$(document).ready(function () {
    $('.galList').hide();
    $('.galNewList').hide();

    $('#gallery').click(function () {
        if ($('.galList').is(':hidden')) {
            $('.galList').slideDown(500);
        }

        else {
            $('.galList').slideUp(500);
        }
    });

    $('#newGal').hover(function () {
        if ($('.galNewList').is(':hidden')) {
            $('.galNewList').show();
        }

        else {
            $('.galNewList').hide();
        }
    });
});

Answer 1

我会将您的 html 更改为以下内容，它应该使您的 js 工作以及在语义上更正确：

$(document).ready(function() {
  $('.galList').hide();
  $('.galNewList').hide();

  $('#gallery').click(function() {
    if ($('.galList').is(':hidden')) {
      $('.galList').slideDown(500);
    } else {
      $('.galList').slideUp(500);
    }
  });

  $('#newGal').hover(function() {
    if ($('.galNewList').is(':hidden')) {
      $('.galNewList').show();
    } else {
      $('.galNewList').hide();
    }
  });
});

.navigation,
.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.navigation > li {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
.navigation > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="navigation">
  <li id="home"><a href="../Home.aspx">Home</a></li>
  <li id="gallery">
    <a href="#">Gallery</a>
    <ul class="galList">
      <li id="newGal">
        <a href="#">New</a>
        <ul class="galNewList">
          <li><a href="#">Profile pictures</a></li>
          <li><a href="#">Backgrounds</a></li>
        </ul>
      </li>
      <li id="refundTick"><a href="#">Delete</a></li>
    </ul>
  </li>
  <li id="about"><a href="#">About</a></li>
</ul>

当前 html 的问题在于，当您悬停“子项”时，它们实际上并不是悬停元素的子项，因此您不再悬停，子项将再次隐藏自己。

如果您迫切希望保留 html 结构，则需要更改悬停选择器：

$('#newGal,.galNewList').hover(function ....

并删除 newGal 和 galList 之间的任何边距 - 如果您需要间距，请将其更改为填充：

h4 { margin:0; padding:5px 0; }

Example