Hide an element if it is displayed (a bit tricky case)

Question

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

The "radio-btns-wrapper-wjs" div will shift when the user selects one of the radio buttons.

This DIV also backs up when the user takes no action (does not select the radio button), but has already moved the mouse pointer to the "radio-btns-wrapper-wjs" DIV and then moves it.

So far so good.

I need to have the same DIV, "radio-btns-wrapper-wjs", crawl back when the user pushes their mouse out of the <span> element "selected-search-wjs" , but NOT if the user hovers over the DIV "radio -btns-wrapper-wjs " .

The fact is that if you do this:

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

The DIV with the radio-btns-wrapper-wjs radio buttons will shift back as soon as I leave this DIV to select the radio button.

I need a condition that says something like:

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

Does all this make sense?

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/

.

Answer 1

mouseleave div class= "radio-btns-wjs" div? , div, div, , mouseleave div .

EDIT:

, :

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

div, , , div , radio-btns-wjs. mouseleave div div (radio-btns-wjs).

Answer 2

, :

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 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;
         }

! =)

Edit:

In short, no additional HTML is needed

Answer 4

Try adding this to your JS:

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