如果顯示隱藏元素（有點複雜的情況下）

我有一個名爲「radio-btns-wrapper-wjs」的DIV中的單選按鈕列表，當你點擊一個「觸發器」時，這個DIV向下/元素，在我的例子中是類「selected-search-wjs」。如果顯示隱藏元素（有點複雜的情況下）

當用戶選擇單選按鈕之一時，DIV「radio-btns-wrapper-wjs」滑回備份。

這個div也滑入了當用戶不採取任何動作（不選擇一個單選按鈕），但已經動了動鼠標移到「無線電btns - 包裝 - WJS」 DIV，然後移動它了。

到目前爲止，這麼好。

我需要的是具有相同的DIV「radio-btns-wrapper-wjs」，當用戶從< span「selected-search-wjs」元素中移出鼠標時滑動備份但NOT如果用戶將他的鼠標移動到DIV「radio-btns-wrapper-wjs」上。

的事情是，是，如果做到這一點：

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

與單選按鈕的DIV，「無線電btns - 包裝 - WJS」，只要我離開那個DIV選擇滑回了一個單選按鈕。

我需要說像一個條件：

「隱藏DIV‘無線電btns - 包裝 - WJS’如果用戶將鼠標懸停你，然後徘徊出來此外，隱藏這同樣DIV如果用戶將他的鼠標從< span「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/

感謝。

來源

2011-01-12 Ricardo Zea

您可以將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，並與它的類滑出的div屬性設置爲radio-btns-wjs。 mouseleave屬性從內部div移動到包含div（radio-btns-wjs）。

來源

2011-01-12 21:29:33

沒錯！你的解決方案工作得很好哈利，我只需要調整包含單選按鈕的DIV的位置，以「touch」< span >，因爲我在它們之間留下了1px的間隙，所以DIV滑回去了。我更喜歡你的解決方案，因爲它比Rionmonster的HTML效率高一點，但Rionmonster的解決方案也起作用。非常感謝！看到這裏的解決方案演示：http://jsfiddle.net/t2HkQ/6/ – 2011-01-12 22:06:07

如果您不介意，我會將您的更新添加到我的答案。對不起，我沒有編碼，我走出了門，沒有時間去測試它。 – 2011-01-12 23:41:19

嘗試添加該到您的JS：

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

來源

2011-01-12 21:31:50

這裏有你所需要的工作演示：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');  
    });

來源

2011-01-12 21:48:20

Rionmonster，您的解決方案完美運作。唯一的缺點是額外的標記。這只是針對正確的HTML元素的問題。非常感謝您的幫助和演示。當然，我給了你一個投票。 – 2011-01-12 22:07:31

所以，我在您的演示做的是刪除該條目：

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

並添加這一項（因爲你真正想要的，簡單來說就是「

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

但它沒有工作，我想知道爲什麼，因爲它有工作...所以我看着你的CSS，並發現了一些奇怪的（：當鼠標離開包裝「），以效果基本show僅顯示相關部分）：

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

來源

2011-01-12 21:57:27 Francisco

如果顯示隱藏元素（有點複雜的情況下）

回答

相關問題