Question

我觉得好像我错过了一些简单的东西，但实际上我试图在标题悬停时让一部分内容下拉。然后当鼠标光标没有触及标题和所选内容时，我希望内容能够向上滑动。我尝试过使用.add或使用多个选择器，它似乎无法正常工作。我需要内容足够长时间才能让某人选择其中的链接，但无论何时从标题中导航，内容都会消失。

的jQuery

$(document).ready(function(){
  $("#cat1").hide()
  $("#title1").on("mouseenter",function(){
    $("#cat1").slideDown();
  });
  $("#cat1").add("#title1").on("mouseleave",function(){
    $("#cat1").slideUp();
  });
});

HTML

<h4 id="title1">Getting Started</h4>
<div id="cat1">
  <ul>
    <li>Line</li>
    <li>Line</li>
    <li>Line</li>
    <li>Line</li>
  </ul>
</div>

Answer 1

最简单的解决方案是封装相关部分。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#cat1").hide();

    $(".menuItem").on("mouseenter", function() {
      $("#cat1").slideDown();
    });

    $(".menuItem").on("mouseleave", function() {
      $("#cat1").slideUp();
    });
  });

</script>
<div class="menuItem">
  <h4 id="title1">Getting Started</h4>
  <div id="cat1">
    <ul>
      <li>Line</li>
      <li>Line</li>
      <li>Line</li>
      <li>Line</li>
    </ul>
  </div>
</div>

通过定位包装元素，您可以确保在离开标题转到内容时不会触发mouseleave事件。只有当它离开共享区域时。

Answer 2

你需要摆脱.add("#title1")，我认为你得到了你想要的东西。

$(document).ready(function(){
$("#cat1").hide()
$("#title1").on("mouseenter",function(){
$("#cat1").slideDown();
});
$("#cat1").on("mouseleave",function(){
$("#cat1").slideUp();
});
 }); 
</script>
<h4 id="title1">Getting Started</h4>
<div id="cat1">
<ul>
    <li>Line</li>
    <li>Line</li>
    <li>Line</li>
    <li>Line</li>
</ul>
</div>

见这里：https://jsfiddle.net/jonmrich/1d6d7k9x/1/

Answer 3

我发现了两种可能的解决方案，但我没有尝试过任何一种解决方案。

首先，在你的h和div周围放一个包装器，然后将你的事件附加到包装器上。

<div id="menu1">  <-- Events go here
<h4 id="title1">Getting Started</h4>
<div id="cat1">
<ul>
    <li>Line</li>
    <li>Line</li>
    <li>Line</li>
    <li>Line</li>
</ul>
</div>
</div>

另一个选项是设置你的cat div的样式，使其覆盖标题，并且只将鼠标留给div，而不是标题。

在JQuery中发生事件之前，如何要求对两个元素执行操作？

3 个答案: