Question

我有一个名为“radio-btns-wrapper-wjs”的DIV内的单选按钮列表，当你点击'trigger'元素时，这个DIV向下/向上滑动，在我的情况下是＆lt; span＆gt;使用“selected-search-wjs”类。

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

当用户不采取任何操作（不选择单选按钮）但已将鼠标移动“radio-btns-wrapper-wjs”DIV时，此DIV也会向上滑动然后把它移出去。

到目前为止，非常好。

当用户将鼠标移出＆lt;时，我需要的是让相同的DIV，“radio-btns-wrapper-wjs”向上滑动。 span＆gt; “selected-search-wjs”元素但如果用户将鼠标移到DIV“radio-btns-wrapper-wjs”上则不会。

问题是，如果这样做：

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

带有单选按钮的DIV，“radio-btns-wrapper-wjs”，一旦我离开DIV选择一个单选按钮，就会立即滑回。

我需要一个类似的条件：

“隐藏DIV”radio-btns-wrapper-wjs“如果用户盘旋在你身上然后徘徊。另外，如果用户将鼠标移离＆lt; span＆gt;，则隐藏同样的DIV。 “selected-search-wjs”，但不是如果他将鼠标移到DIV“radio-btns-wrapper-wjs”上。“

这一切都有意义吗？

这是我的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：

//This slides up/down the DIV with the radio buttons
$('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select&hellip;').click(function() {
    $('.radio-btns-wrapper-wjs').slideToggle('fast');       
}); 

//This hides the DIV with the radio buttons, if the user has hovered over it
$('.radio-btns-wrapper-wjs').mouseleave(function() {
    $(this).slideUp();
});

正如你所看到的，我对jQuery很新，但现在这已经超出了我的想法。

非常感谢任何帮助。

以下是一个实例：http://jsfiddle.net/t2HkQ/3/

感谢。

Answer 1

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

HTML：（只是添加了按钮/菜单区域的包装器）

<div id="dropdown" style="height: 140px; width: 160px;">
    //All other HTML here
</div>

jQuery：（如果鼠标离开包装区域，则只需隐藏必要的下拉菜单）

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

Answer 2

你可以将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(); });

总有一个包含作为按钮的span的div，以及将其class属性设置为radio-btns-wjs的滑出div。 mouseleave属性从内部div移动到包含div（radio-btns-wjs）。

Answer 3

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

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

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

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

但它没有用，我想知道为什么，因为它必须工作......所以我看了你的css并发现了一些奇怪的东西（仅显示相关部分）：

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

最后，我所做的就是更新你的CSS：

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

瞧！它工作=）

修改

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

Answer 4

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

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

显示隐藏元素（有点复杂的情况）

4 个答案: