Element verbergen, wenn angezeigt (ein kleiner komplexer Fall)

Question

Ich habe eine Liste von Optionsfeldern, die sich in einem DIV namens "radio-btns-wrapper-wjs" befinden, dieses DIV gleitet nach unten/oben, wenn Sie auf einen "Trigger" klicken Element, in meinem Fall eine < span> mit der Klasse "selected-search-wjs".

Der DIV "radio-btns-wrapper-wjs" wird wieder angezeigt, wenn der Benutzer einen der Optionsfelder auswählt.

Dies auch schon bewegt „radio-btns-Wrapper-wjs“ DIV seine Maus über und es hat sich wieder auf, wenn der Benutzer keine Aktion nehmen (kein Optionsfeld), aber DIV gleitet dann auszieht .

So weit, so gut.

Was ich brauche, ist die gleiche DIV haben „Radio-btns-Wrapper-wjs“, nach hinten schieben, wenn der Benutzer seine Maus bewegt sich von der < span> „ausgewählt Suche-wjs“ Element aber NICHT wenn der Benutzer seine Maus über das DIV "radio-btns-wrapper-wjs" bewegt.

Die Sache ist, dass ist, dass, wenn dies zu tun:

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

Die DIV mit der Radiobuttons „Radio-btns-Wrapper-wjs“ gleiten zurück, sobald ich verlassen, dass DIV zu wählen ein Optionsfeld

brauche ich einen Zustand, der etwas sagt wie:.

„Ausblenden der DIV‚radio-btns-Wrapper-wjs‘, wenn der Benutzer über Sie schwebt und dann schwebt Sie auch heraus, verstecken diese gleiche DIV, wenn die Der Benutzer bewegt seine Maus weg von der < Spanne> "selected-search-wjs", aber NICHT, wenn er seine Maus über den DIV "radio-btns-wrapper-wjs" bewegt. "

Macht das alles Sinn?

Hier ist mein 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> 

Meine 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(); 
}); 

Wie Sie sehen, ich jQuery bin sehr neu, aber das ist viel jetzt über meinen Kopf.

Jede Hilfe wird sehr geschätzt.

Hier ist ein anschauliches Beispiel: http://jsfiddle.net/t2HkQ/3/

Dank.

Answer 1

Können Sie das mouseleave -Ereignis auf das class = "radio-btns-wjs" -div setzen, anstatt auf das innere div? Auf diese Weise kann die Maus über die Spanne oder das innere div sein, aber wenn sie das div mit diesen verlässt, wird das mouseleave-Ereignis ausgelöst und verschiebt das innere div wieder nach oben.

EDIT:

Hier ist die Änderung von Ricardo gemacht:

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

Es gab immer eine div die Spanne enthält, die als Schaltfläche wirkt, und die Folie aus div mit seiner Klasse Eigenschaft auf Radio-Btns-Wjs festgelegt. Die mouseleave -Eigenschaft wird vom inneren div in das enthaltende div (radio-btns-wjs) verschoben.

Answer 2

Versuchen Sie diese in Ihre JS hinzuzufügen:

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

Answer 3

Hier ist eine Arbeits Demo von dem, was Sie brauchen: Demo

HTML: (nur ein Wrapper für die Schaltfläche/Menübereich hinzugefügt)

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

jQuery: (einfach versteckt die notwendige Drop-down, wenn der mous e verlässt der umwickelte Bereich)

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

Answer 4

Also, was ich in der Demo tat, war diesen Eintrag zu löschen:

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

und fügen Sie diese ein (weil das, was Sie wirklich, ist einfacher gesagt wollen " Also schaute ich auf Ihre CSS

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

Aber es funktionierte nicht, und ich habe mich gefragt, warum, weil sie arbeiten musste ... und fand etwas seltsam (: slideup, wenn die Maus den Wrapper ") verlässt nur den relevanten Teil anzeigen):

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

So endlich, was ich tat, war auch der CSS zu aktualisieren:

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

Und voila! Es funktionierte =)

Edit:

Kurz gesagt, keine Notwendigkeit für zusätzliche HTML