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工作以及在语义上更正确：

＆＃13;

$(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();
    }
  });
});

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

您当前的html存在的问题是，当您将＆＃34;子项＆＃34;悬停时，它们实际上并不是悬停元素的子项，因此您不再徘徊，孩子们会再次隐藏自己。

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

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

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

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

Example

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

1 个答案: