حل مشکل دوبار کلیک کردن برای اجرای کد جاواسکریپت

[kooroshheydarirad]

با سلام
من تابع زیر را نوشتم و اون رو توی رخداد کلیک یک دکمه در یک فایل html قرار دادم


function openNav() {
if(document.getElementById("main_menu").style.width == "0px"){
document.getElementById("main_menu").style.width = "250px";
}else{
//alert("nok!");
document.getElementById("main_menu").style.width = "0px";
}
}



حال مشکل اینجاست که وقتی صفحه html رو توی مرورگر باز میکنم، برای بار اول باید دوبار روی دکمه کلیک کنم تا منو را باز کند اما برای دفعات بعدی یک بار کلیک باز میکند و یک بار کلیک می بندد.

ایراد کارم کجاست و چیکار کنم؟

[plague]

مشکلی نداره کدت
https://jsfiddle.net/318os9rq/

احتمالا تو css و html یه مشکلی داری که بار اول اجرا نمیشه یا اجرا شدنش رو متوجه نمیشی نه اینکه کلیک کار نکنه کافیه یه آلرت بزاری اول تابع تا متوجه بشی با کلیک اول اجرا میشه یا نه

[parsaasefi]

درود ،
برای اینکار دو تا کار می تونید انجام بدید یکی استفاده از متغییر برای مشخص کردن باز بودن یا نبودن منو و اون کی یهم با widthOffset
ولی دلیل اینکه نمی تونید از این کدتون استفاده کنید اینه که style.width مقداری رو برمی گردونه که یا به صورت اینلاین مشخص شده یا اینکه با style.width = n + "px"
به خاطر همین هم بار اول اجرا نمی شه ولی بار دوم درست کار می کنه درواقع همیشه درست کار می کنه ولی بار اول چون به صورت اینلاین یا با style.width براش تعریف نشده style.width مقدار خالی رو برمی گردونه و نه صفر رو به خاطر همین کد های داخل بلاک else اجرا می شه که width رو صفر می کنه و حالا بار دوم که کلیک می کنید چون با style.width بهش مقدار صفر پیکسل رو دادید شرطتتون اونطوری که می خواین اجرا می شه
حالا دو روشی که گفتم اینطوریه :


var open = false;
function openMenu(){
if(open){
document.querySelector("#menu").style.width = "0px";
open = false;
}
else{
document.querySelector("#menu").style.width = "100px";
open = true;
}
}

روش دوم :


function openMenu(){
if(document.querySelector("#menu").offsetWidth == 100){
document.querySelector("#menu").style.width = "0px";
}
else{
document.querySelector("#menu").style.width = "100px";
}
}

موفق باشید :چشمک: