如何使用.blur在使用.click在另一個div後刪除div

我想讓一個大的搜索欄div消失第二個我刪除我的鼠標遠離該div（但只有在大搜索欄可見在另一個搜索欄上使用.click功能）。如何使用.blur在使用.click在另一個div後刪除div

很抱歉，如果這聽起來有點混亂，但是這是我迄今所做的：

$("#bar-b").click(function() { 
    $("#quickSearch").show(); 
});

的#bar-b DIV是小主搜索條，一旦我點擊它，在#quickSearch DIV（本大搜索欄我創建的）在小型主搜索欄下方顯示。我想要做的是當我將光標移動到#quickSearch div（我預計不會發生變化，所以什麼都不會發生，這是迄今爲止所做的），但是當我將光標從#quickSearch div移開時，我想要#quickSearch div消失。如果有人能告訴我如何做到這一點，那麼我會很感激謝謝。

我已經做了一些嘗試，這被證明是不正確的，如：

$("#bar-b").click(function() { 
    $("#quickSearch").show(); 
}); 

$("#quickSearch").mouseleave(function() { 
    $("#quickSearch").hide(); 
});

HTML標籤（每個格下面列出的是否有幫助）：

<div id="bar-b"> 
    <a name="thesearchbox"></a> 
    <input id="Keyword" accesskey="4" type="text" name="keyword" value="Search Jessops - Keyword, name, catalogue no." style="color: rgb(153, 153, 153); "> 
    <input id="cmdSearch" class="button" type="submit" value=""> 
</div> 

<div id="quickSearch" style="border: 3px solid black; height: 250px; display: none;">/div>

來源

2012-08-16 user1279780

「點擊」功能啓用時「是什麼意思？ – Jon 2012-08-16 08:28:46

如果您在http://jsfiddle.net上給我們提供了一些代碼，或者至少會發布顯示相關標籤的標記，這將非常有幫助。 – 2012-08-16 08:30:41

@Jon - 忘記我說的話，我把這寫成了一個錯誤，現在編輯了我的問題，謝謝你的選擇。 – user1279780 2012-08-16 08:49:01

我認爲這是你在追求什麼，如果是這樣的話，那麼你真的離得很遠！我已經扔在一起jsFiddle example所以你可以玩耍，或者如果我違反了你的要求，我會進一步指導我，我會嘗試改進它。

$("#bar-b").bind("click", function() { 
    $("#quickSearch").show(); 
}); 

$("#quickSearch").bind("mouseout", function() { 
    $(this).hide(); 
});

來源

2012-08-16 09:08:33

如果我正確理解你看起來像你在正確的道路上，你只需要確保你只隱藏在正確的環境下。實現此目的最簡單的方法可能是添加一個變量來存儲狀態，並將其設置爲您的事件偵聽器函數中的true。在你的onClick處理程序中放入openedWithClick = true，可能還會根據你的場景添加一個對輸入鼠標的檢查。您也可能想要使用mouseout()而不是mouseleave()。如果這不是您的問題，您可能需要澄清示例代碼到底發生了什麼，以及它與預期發生的不同之處。

來源

2012-08-16 08:57:04 Thor84no

感謝您的信息，我已考慮到這一點，並將開始練習。 – user1279780 2012-08-16 09:06:08

檢查這個jsfiddle link

你的代碼有語法errror

<div id="quickSearch" style="border: 3px solid black; height: 250px; display: none </div>

格缺少tag..i已經糾正它關閉，它的工作

<div id="quickSearch" style="border: 3px solid black; height: 250px; display: none;"> </div>

來源

2012-08-16 08:57:32 Sibu

感謝您的糾正，我只是做了一個複製和粘貼。 – user1279780 2012-08-16 08:58:29

@ user1279780我已經更新了我的jsfiddle鏈接。它不是早期工作:-) – Sibu 2012-08-16 09:02:53

再次感謝，它的作品:)。 – user1279780 2012-08-16 09:55:17

如何使用.blur在使用.click在另一個div後刪除div

回答

相關問題