Jquery 显示时隐藏元素（有点复杂）

我有一个单选按钮列表，它位于一个名为“radio btns wjs包装器”的DIV中，当你点击一个“trigger”元素时，这个DIV会向下/向上滑动，在我的例子中是一个类“selected search wjs”

当用户选择其中一个单选按钮时，DIV“radio btns wrapper wjs”会向上滑动

当用户不采取任何行动（不选择单选按钮）但已将鼠标移到“radio btns wjs”DIV上，然后将其移出时，此DIV也会向上滑动

到目前为止，一切顺利

我需要的是，当用户将鼠标从“selected search wjs”元素中移出时，使相同的DIV“radio BTN wjs”向上滑动，但如果用户将鼠标移到DIV“radio BTN wjs”上，则不需要

问题是如果你这样做：

$('.selected-search-wjs').mouseleave(function() {
  $('.radio-btns-wrapper-wjs').slideUp();
});

带有单选按钮“radio btns wjs”的DIV在我离开该DIV以选择单选按钮时立即向上滑动

我需要一个条件，比如：

如果用户将鼠标悬停在您上方，然后将鼠标悬停在外，则隐藏DIV“radio btns wjs”。此外，如果用户将鼠标移离所选搜索wjs，则隐藏此DIV，但如果用户将鼠标移到DIV“radio btns wjs”上，则不隐藏此DIV

这一切有意义吗

这是我的HTML：

<div class="radio-btns-wjs"><span class="selected-search-wjs">&nbsp;</span>
  <div class="radio-btns-wrapper-wjs">
    <label>
      <input type="radio" name="rb" value="all" id="all">
      All</label>        
    <label>
      <input type="radio" name="rb" value="ln" id="ln">
      Option 1</label>
    <label>
      <input type="radio" name="rb" value="prodsandserv" id="prodsandserv">
      Option 2</label>
    <label>
      <input type="radio" name="rb" value="publications" id="publications">
      Option 3</label>
    <label>
      <input type="radio" name="rb" value="comm" id="comm">
      Option 4</label>
    <label>
      <input type="radio" name="rb" value="lweb" id="lweb">
      Option 5</label>
  </div>
</div>

正如您所看到的，我对jQuery非常陌生，但这已经超出了我的理解范围

非常感谢您的帮助

下面是一个活生生的例子：

---

谢谢。

能否将mouseleave事件放置在class=“radio btns wjs”div而不是内部div上？这样，鼠标可以在跨度或内部div上，但如果它离开包含这些的div，mouseleave事件将触发并将内部div滑回

编辑：

以下是里卡多所做的更改：

//Hide list when mouse leaves the list
$('.radio-btns-wjs').mouseleave(function() {
    $('.radio-btns-wrapper-wjs').slideUp();
});

---

总有一个div包含充当按钮的span，还有一个slide out div，其class属性设置为radio btns wjs。mouseleave属性从内部div移动到包含的div（radio btns wjs）。

能否将mouseleave事件放在class=“radio btns wjs”div上，而不是放在内部div上？这样，鼠标可以在跨度或内部div上，但如果它离开包含这些的div，mouseleave事件将触发并将内部div滑回

编辑：

以下是里卡多所做的更改：

//Hide list when mouse leaves the list
$('.radio-btns-wjs').mouseleave(function() {
    $('.radio-btns-wrapper-wjs').slideUp();
});

---

总有一个div包含充当按钮的span，还有一个slide out div，其class属性设置为radio btns wjs。mouseleave属性从内部div移动到包含的div（radio BTN wjs）。

尝试将其添加到JS中：

$('.selected-search-wjs').mouseleave(function() {
    $('.radio-btns-wrapper-wjs').slideUp();
});

---

尝试将此添加到您的JS中：

$('.selected-search-wjs').mouseleave(function() {
    $('.radio-btns-wrapper-wjs').slideUp();
});

---

以下是您需要的工作演示：

HTML:（刚刚为按钮/菜单区域添加了一个包装）

---

以下是您需要的工作演示：

HTML:（刚刚为按钮/菜单区域添加了一个包装）

---

所以，我在你的演示中删除了这个条目：

$('.radio-btns-wrapper-wjs').mouseleave(function() {
        $(this).slideUp();
    });

加上这个（因为你真正想要的，用更简单的话来说就是“鼠标离开包装器时滑动”）：

但它不起作用，我想知道为什么，因为它必须起作用。。。因此，我查看了您的css，发现了一些奇怪的东西（仅显示相关部分）：

最后，我还更新了你的CSS：

div.radio-btns-wrapper-wjs {
             position:relative;
             left:0; top:0px; z-index:10;
         }

瞧！成功了=）

编辑：

---

简而言之，不需要额外的HTML

，因此，我在您的演示中所做的就是删除此条目：

$('.radio-btns-wrapper-wjs').mouseleave(function() {
        $(this).slideUp();
    });

加上这个（因为你真正想要的，用更简单的话来说就是“鼠标离开包装器时滑动”）：

但它不起作用，我想知道为什么，因为它必须起作用。。。因此，我查看了您的css，发现了一些奇怪的东西（仅显示相关部分）：

最后，我还更新了你的CSS：

div.radio-btns-wrapper-wjs {
             position:relative;
             left:0; top:0px; z-index:10;
         }

瞧！成功了=）

编辑：

---

简而言之，不需要额外的HTML

Yep！你的解决方案很好，Harry，我只需要调整包含单选按钮的DIV的位置来“触摸”，因为我在它们之间留了1px的间隙，所以DIV会向后滑动。我更喜欢你的解决方案，因为它比Rionmonster的HTML效率高一点，但Rionmonster的解决方案也同样有效。谢谢！在这里查看解决方案的演示：如果您不介意，我会将您的更新添加到我的答案中。很抱歉，我没有输入代码，我刚出门，没有时间测试。是的！你的解决方案很好，Harry，我只需要调整包含单选按钮的DIV的位置来“触摸”，因为我在它们之间留了1px的间隙，所以DIV会向后滑动。我更喜欢你的解决方案，因为它比Rionmonster的HTML效率高一点，但Rionmonster的解决方案也同样有效。谢谢！在这里查看解决方案的演示：如果您不介意，我会将您的更新添加到我的答案中。很抱歉，我没有编写代码，我刚出门，没有时间测试它。Rionmonster，你的解决方案非常有效。我唯一的缺点就是额外的加价。这只是针对正确的HTML元素的问题。非常感谢您的帮助和演示。当然，我给了你一票Rionmonster，你的解决方案非常有效。我唯一的缺点就是额外的加价。这只是针对正确的HTML元素的问题。非常感谢您的帮助和演示。当然，我给了你一票。对，弗朗西斯科，尽管CSS中的修复是将top:属性从33px修改为31px，而不是0。正如我在回答上面Harry的解决方案时所说，有一个1px的间隙使滑动DIV滑回原位，因为它们现在“接触”，除非你把鼠标移开，否则它不会滑回原位。谢谢你的帮助。Gav

div.radio-btns-wrapper-wjs {
             position:relative;
             left:0; top:0px; z-index:10;
         }