After .toggle（）用戶在jQuery中使用.mouseleave（）後點擊兩次

當用戶切換$('#menu');按鈕時，它們沒有問題。但是，當用戶使用鼠標點擊$('#dropdown');然後單擊返回$('#menu');他們必須點擊兩次以便切換再次工作。難道我做錯了什麼？After .toggle（）用戶在jQuery中使用.mouseleave（）後點擊兩次

jsfiddle demo

=========== =========== HTML

<a class="" href="javascript:;" id="menu"></a> 
<div style="display: none;" id="dropdown"> 
    <div id="wrap"> 
    <div class="menu-section"> 
     <div class="menu-header-section"> 
     <h3>Header</h3> 
     </div> 
     <div class="menu-list"> 
     <ul class="list"> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <a href="javascript:;" class="closeThis">close</a> </div> 
</div>

=========== jQuery的===========

//menu 
var menu = $('#menu'); 
var dropdown = $('#dropdown'); 

menu.toggle(function() { 
    menu.addClass('active'); 
    dropdown.fadeIn(); 
}, function() { 
    menu.removeClass('active'); 
    dropdown.fadeOut(); 
    return false; 
}); 
dropdown.mouseleave(function() { 
    menu.removeClass('active'); 
    dropdown.fadeOut(); 
    return menu; 
});

來源

2012-05-18 Davis

創建'jsFiddle'，得到了很多我們更容易理解你想要達到 –

感謝元首了一下。你可以幫我嗎？ – Davis

http://jsfiddle.net/KvqMV/1/這是你需要開始製作:-) –

的docs解釋這一切：

.toggle（處理程序（eventObject）傳遞，處理程序（eventObject）傳遞[，處理程序（eventObject）傳遞]）處理程序（ eventObject）單擊元素時每執行一次該函數。 handler（eventObject）一個函數，用於在單擊元素的每個奇數時間執行。

.toggle（）方法爲click事件綁定一個處理程序，因此觸發click的規則也適用於此處。

換句話說，toggle()替代物基於偶數和偶數click事件。所以：

點擊[奇]：顯示
點擊[甚至]：隱藏
點擊1：顯示
點擊1：顯示
點擊2：隱藏
click 3：顯示
click 4：Hide
點擊5：顯示
鼠標離開：隱藏
點擊6：隱藏//注意#dropdown已經藏在這裏，但無論如何，這是一個甚至點擊。點擊一次，然後再次隱藏它。
點擊7：顯示//點擊兩次顯示。

無論如何，這是你的問題的完美。致力於解決方案。

解決方案

手動觸發click事件。

替換：

dropdown.mouseleave(function() { 
    menu.removeClass('active'); 
    dropdown.fadeOut(); 
    return menu; 
});

有了：

dropdown.mouseleave(function() { 
    menu.trigger('click'); 
});

演示：http://jsfiddle.net/aymansafadi/BF8p6/2/

來源

2012-05-18 12:54:00

感謝您的輸入Ayman – Davis

從邏輯上講，

您第一點擊menu中，出現dropdown。你mouseleavedropdown（它消失）。

現在，當您單擊menu第二次，它執行.toggle()功能的「下半場」（即.fadeOut()的dropdown）。

在此之後，當您再次單擊menu時，它會執行.toggle()的「前半部分」，看起來都很愉快。

編輯

您可以嘗試使用的flag概念。

var menu = $('#menu'); 
var dropdown = $('#dropdown'); 
var flag = 'reset'; 

menu.click(function() { 
    if(flag == 'reset') 
    { 
     menu.addClass('active'); 
     dropdown.fadeIn(); 
     flag = 'set'; 
    } 
    else if(flag =='set') 
    { 
     flag = 'reset'; 
     menu.removeClass('active'); 
     dropdown.fadeOut();        
     return false; 
    } 
}); 

dropdown.mouseleave(function() { 
    flag = 'reset'; 
    menu.removeClass('active'); 
    dropdown.fadeOut(); 
    return menu; 
});

的jsfiddle：http://jsfiddle.net/BF8p6/1/

來源

2012-05-18 12:38:19

我在答案中添加了演示鏈接.. http://jsfiddle.net/BF8p6/ – Davis

我清除了你的懷疑？至於哪裏出了問題？ –

半途......如何返回切換的上半部分？ – Davis

希望這會工作。

$('#menu').click(
function() { 

if ($("#dropdown:visible")) 
{ 
$('.mapNavLeft').removeClass("active"); 
$(this).next('#dropdown')fadeOut(); 
} else { 
$(this).addClass("active"); 
$(this).next('#dropdown')fadeIn(); 
} 

}); 

$("#dropdown").hover(
function() { 
    return false; 
}, 
function() { 
    $(this).fadeOut(); 
} 
);

來源

2012-05-18 12:57:25 Zonf

嗨Zonf，它不工作。感謝您的輸入。 – Davis

After .toggle（）用戶在jQuery中使用.mouseleave（）後點擊兩次

回答

相關問題