سوال

[fr_sdgh]

$("#openfloatmenu").css('display', 'block');
$("#openfloatmenu").on('click', function(e) {
e.preventDefault();
$('#floatmenu').css({
display: 'block'
}).animate({
width: "16em"
})
$("body").on('click', function() {
$('#floatmenu').fadeOut();
})
})

openfloatmenu تگ a هست که باهاش منو بصورت انیمیت باز میشه و وقتی روی body کلیک شه باید منو بسته شه ولی بلافاصله که منو باز میشه بسته میشه!
بخش complete انیمیت رو هم تست کردم قثط برای بار اول جواب میده !!!

[adameh_bahal]

$("#openfloatmenu").css('display', 'block');
$("#floatmenu").css('display', 'none');


$("#openfloatmenu").on('click', function(e) {
e.preventDefault();
$('#floatmenu').css({
display: 'block'
}).animate({
width: "16em"
});


$("body").on('click', function(e) {
var openfloatmenuContainer = $("#openfloatmenu");
if (!(openfloatmenuContainer.is(e.target)) // if the target of the click isn't the container...
&& openfloatmenuContainer.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#floatmenu').fadeOut();
}


});


});

[fr_sdgh]

نگرفتم قضیه رو یکی بیاد توضیح بده خواهشا

e.target اینکه اون المنتی رو که روش کلیک شده بصورت آبجکت برمیگردونه.
دقیقا متوجه نشدم is و has رو برای اینکه بگیم روی منو کلیک شده یا نه بکار بردیم؟!
lenght === 0 واسه چیه دیگه؟

[adameh_bahal]

ابتدا با استفاده از دستور

$("#floatmenu").css('display', 'none');

المنت پنهان میشه(که به نظرم روش خوبی نیست و باید با استفاده از سی اس اس این کارو انجام داد چون تا برسه به این دستور ممکنه زمان ببره...) ، بعد داخل ایونت کلیک ابتدا بررسی میشه که اولا اگر المنتی که روش کلیلک شده #openfloatmenu نبود:

if (!(openfloatmenuContainer.is(e.target))

و همینطور هیچ کدوم از فرزندان #openfloatmenu نبود:

openfloatmenuContainer.has(e.target).length === 0)

fadeOut بشه

[fr_sdgh]

من متوجه نمیشم این length === 0 واسه چیه؟ درضمن مگه has مثل is ترو و فالز برنمیگردونه! چرا شما نقیض ( ! ) واسش اسفاده نکردین؟

[fr_sdgh]

بعدش هم این که کار نمیکنه!!! https://jsfiddle.net/9ohbyvx8/
درضمن چرا شما در آخر میگی


var openfloatmenuContainer = $("#openfloatmenu");

در حالی که از نظر من باید بگید


var openfloatmenuContainer = $("#floatmenu");


البته من کارم رو با ایجاد یه wrapper کاذب انجام دادم و نتیجه دلخواه رو گرفتم؛ الان فقط توی چرا و چگونگی این مسئله کنجکاوم.