如果显示则隐藏元素(有点复杂的情况) [英] Hide element if displayed (a little complex case)

问题描述

我在DIV中有一个名为"radio-btns-wrapper-wjs"的单选按钮列表，当您单击触发"元素时，此DIV会上下滑动. span>，其类别为"selected-search-wjs".

当用户选择其中一个单选按钮时，DIV"radio-btns-wrapper-wjs"会向后滑动.

当用户不执行任何操作(未选择单选按钮)但已经将鼠标移到"radio-btns-wrapper-wjs" DIV上时，此DIV也会向后滑动然后将其移出.

到目前为止，很好.

我需要的是具有相同的DIV，即"radio-btns-wrapper-wjs"，当用户将鼠标从<跨度>"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".此外，如果用户将鼠标移离< span>，则隐藏相同的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…').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/

谢谢.

解决方案

是否可以将mouseleave事件放置在class ="radio-btns-wjs" div而不是内部div上?这样，鼠标可以位于范围或内部div上，但是如果它离开包含这些div的div，则mouseleave事件将触发并向上滑动内部div.

这是里卡多(Ricardo)所做的更改:

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

总是有一个div，它包含充当按钮的跨度，并且将div的class属性设置为radio-btns-wjs. mouseleave属性从内部div移到包含div(radio-btns-wjs).

I have a list of radio buttons that are inside a DIV called "radio-btns-wrapper-wjs", this DIV slides down/up when you click on a 'trigger' element, in my case a < span > with the class "selected-search-wjs".

The DIV "radio-btns-wrapper-wjs" slides back up when the user selects one of the radio buttons.

This DIV also slides back up when the user does not take any action (does not select a radio button) but has already moved his mouse over "radio-btns-wrapper-wjs" DIV and then moves it out.

So far, so good.

What I need is to have the same DIV, "radio-btns-wrapper-wjs", slide back up when the user moves his mouse out from the < span > "selected-search-wjs" element but NOT if the user moves his mouse over the DIV "radio-btns-wrapper-wjs".

The thing is that is that if do this:

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

The DIV with the radio buttons, "radio-btns-wrapper-wjs", slides back up as soon as I leave that DIV to select a radio button.

I need a condition that says something like:

"Hide the DIV "radio-btns-wrapper-wjs" if the user hovers over you and then hovers out. Also, hide this same DIV if the user moves his mouse away from the < span > "selected-search-wjs", but NOT if he moves his mouse over the DIV "radio-btns-wrapper-wjs"."

Does all this make sense?

Here's my 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>

My jQuery:

//This slides up/down the DIV with the radio buttons
$('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select…').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();
});

As you can see I'm very new to jQuery, but this is way over my head now.

Any help is greatly appreciated.

Here's a live example: http://jsfiddle.net/t2HkQ/3/

Thanks.

解决方案

Can you place the mouseleave event on the class="radio-btns-wjs" div, instead of the inner div? That way the mouse can be over the span, or the inner div, but if it leaves the div containing those, the mouseleave event will fire and slide the inner div back up.

EDIT:

Here is the change made by Ricardo:

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

There was always a div containing the span that is acting as a button, and the slide out div with it's class property set to radio-btns-wjs. The mouseleave property is moved from the inner div to the containing div (radio-btns-wjs).

这篇关于如果显示则隐藏元素(有点复杂的情况)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！