علی قنواتی
4 سال پیش توسط علی قنواتی مطرح شد
2 پاسخ

مشکل جاوا اسکریپتی

سلام دوستان من یه دکمه دارم که میخوام وقتی منو باز شد بچرخه و وقتی بسته شد برگرده سر حالت اولش
برا اینکار وقتی روش کلیک میشه (که همزمانم منو باز میشه) یه کلاس بهش میدم که رو حالت فوکوس اونو 90 درجه میچرخونه و با کلیک بعدی کلاس رو حذف میکنم
مشکل اینجاست وقتی که منو باز باشه یعنی یه بار روش کلیک کردیم اگه روی خود دکمه کلیک نشه و بیرونش کلیک بشه کلاس حذف نمیشه ولی چون رو حالت فوکوس هست کار نمیکنه (ما هم میخوایم که کار نکنه)
ولی خوب اگه یه بار دیگه رو دکمه کلیک کنییم چون از قبل اون کلاس رو داره حذفش میکنه منو باز میشه ولی دکمه ما نچرخیده
منو با alpinjs باز و بسته میشه
استایل ها tailwindcss هست
حذف و اضافه کردن کلاس به صورت این لاین با جاوا اسکریپت

<header class="bg-white border-b" x-data="{ open: false }">
    <div class="flex items-center justify-between p-4">
        <div>
            <button type="button" @click="open = true" class="block text-gray-900 hover:text-gray-600 focus:text-gray-600 focus:outline-none
                    duration-500 transform" onclick="this.classList.toggle('focus:rotate-90')">
                <svg class="w-10 h-10 fill-current" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1"
                     viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"><path
                        d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
            </button>
        </div>
        <div>
            <a href="/">
                <img class="h-20" src="image/logo.png" alt="Malaco logo">
            </a>
        </div>
    </div>
    <div class="px-2 pb-6 text-right" x-show.transition.opacity.duration.500ms="open" @click.away="open = false">
        <a class="text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">ورود</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">عضویت</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">تماس با
            ما</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">درباره
            ما</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">سوالات
            متداول</a>
    </div>
</header>

ثبت پرسش جدید
سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 4 سال پیش مطرح شد
1

توی alpine.js شما میتونید از همون مقدار true یا false که برای باز یا بسته شدن منو استفاده میکنید برای کلاس هم استفاده کنید یعنی اگه true بود کلاس رو بهش اضافه کنه اگه false شد کلاس رو حذف کنه
این مثال خود داکیومنت

<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>

علی قنواتی
تخصص : توسعه دهنده وب , لاراول
@aligh 4 سال پیش مطرح شد
0

ممنون بله با همین اوکی شد
@hossein.r.1442


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام