javascript - jQuery 悬停并检查链接是否被点击

Question

1. 我想检查链接“meist”是否被点击，如果被点击则将子菜单更改为 submeist。因此，如果您将鼠标悬停在外，它会自动返回到 submeist 菜单

2. 当我想点击子菜单上的东西时，子菜单会消失。我也找不到解决方法。

$(document).ready(function() {
  $("#meist").mouseleave(function() {
    $("#submeist").hide();
    return false;
  });

  $("#meist").mouseenter(function() {
    $("#submeist").show();
    return false;
  });

  $("#seadmed").mouseleave(function() {
    $("#subseadmed").hide();
    return false;
  });

  $("#seadmed").mouseenter(function() {
    $("#subseadmed").show();
    return false;
  });
});

#meist {
  display: inline;
  float: left;
  width: 180px;
  height: 50px;
  color: #191919;
  text-align: center;
  overflow: hidden;
  background: #990000;
  -moz-border-radius-top-left: 50px;
  border-top-left-radius: 50px;
}

#meist:hover {
  text-decoration: underline;
  color: white;
  font-size: 17.5px;
  line-height: 15px;
}

#seadmed {
  display: inline;
  float: left;
  width: 180px;
  height: 50px;
  color: #191919;
  text-align: center;
  overflow: hidden;
  background: #990000;
}

#seadmed:hover {
  text-decoration: underline;
  color: white;
  font-size: 17.5px;
  line-height: 15px;
}

#submenu {
  color: white;
  height: 25px;
  width: 900px;
  background: #630000;
  margin-top: 50px;
}

#submeist {
  display: none;
  font-size: 12px;
}

#submeist .asi1 {
  margin-left: 70px;
  height: 25px;
  width: 75px;
}

#submeist .asi2 {
  margin-left: 25px;
}

#submeist .asi3 {
  margin-left: 25px;
}

#subseadmed {
  display: none;
  font-size: 12px;
}

#subseadmed .item1 {
  margin-left: 70px;
  height: 25px;
  width: 75px;
}

#subseadmed .item2 {
  margin-left: 25px;
}

#subseadmed .item3 {
  margin-left: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li id="meist">
    <p><a href="meist.html">Meist</a></p>
  </li>
  <li id="seadmed">
    <p><a href="seadmed.html">Seadmed</a></p>
  </li>
</ul>

<div id="submenu">
  <ul id="submeist">
    <li class="asi1">
      Asi 1
    </li>
    <li class="asi2">
      Asi 2
    </li>
    <li class="asi3">
      Asi 3
    </li>
  </ul>

  <ul id="subseadmed">
    <li class="item1">
      Item 1
    </li>
    <li class="item2">
      Item 2
    </li>
    <li class="item3">
      Item 3
    </li>
  </ul>
</div>

Answer 1

我想你可以通过添加来延迟隐藏问题

 $("#meist").mouseleave(function () { 
    $("#submeist").delay(1000).hide('fast');
    return false; 
});

和

   $("#seadmed").mouseleave(function () { 
    $("#subseadmed").delay(1000).hide('fast');
    return false; 

小心拖延问题。仅在必要时添加它。这可以是临时解决方案之一，这不是唯一的解决方案。

根据需要增加隐藏子菜单的时间。