برخی اوقات می خواهیم قسمت بزرگی از یک صفحه را مخفی کنیم و آن را تنها در صورت نیاز کاربر نمایش دهیم. یکی از واضح ترین مثال ها در این زمینه، سوالات FAQ یا همان «سوالات متداول» است؛ در اکثر وب سایت ها این قسمت به صورت مخفی است و فقط سوال ها به کاربر نمایش داده می شود تا زمانی که روی سوال کلیک شود و پاسخ نیز ظاهر شود. در این مقاله به بررسی چند نوع از این منوها میپردازیم که یکی از آن ها منوهای آکاردئونی هستند.
ابتدا با یک دکمه و حالت ساده شروع می کنیم:
کلاس collapse.
به هر عنصری داده شود، آن عنصر قابلیت مخفی سازی پیدا میکند (در مثال بالا همان عنصر <div>). این همان محتوایی است که با کلیک مخفی شده و یا نمایش داده می شود. برای کنترل کردن عنصر مخفی ساز از "data-toggle="collapse
برای تگ <a> یا یک دکمه استفاده کنید و سپس "data-target="#id
را برای متصل کردن دکمه به محتوای مخفی شده می نویسیم.
برای عناصر <a> می توانید به جای استفاده از data-target
از href
استفاده کنید:
نکته: از آن جا که کار این منو ها مخفی کردن محتوا است، حالت پیش فرض نیز مخفی بودن محتوا است اما می توانید با اضافه کردن کلاس show.
حالت پیش فرض را روی نمایش محتوا قرار دهید:
منوی آکاردئونی در بوت استرپ
ممکن است شکل برخی از آن ها با برخی دیگر فرق کند، اما این منوها از پرمصرف ترین و رایج ترین منوهای دنیای وب هستند، مخصوصا در زمینه ی مخفی سازی محتوا برای کاربر.
در مثال زیر می خواهیم ساده ترین منوی آکاردئونی در بوت استرپ را بسازیم. ابتدا از attribute ای به نام data-parent
استفاده می کنیم تا زمانی که یکی از عناصر مخفی شونده در حال نمایش است، دیگر عناصر مخفی شونده در عنصر مادرشان مخفی شوند:
افکت سازی کلاس collapsing
اولین نکته استفاده از کلاس collapsing.
است. این کلاس زمانی که منو در حال بسته شدن باشد یک افکت به آن اضافه می کند و زمانی که بسته شد این افکت را حذف می کند. به مثال زیر توجه کنید:
این افکت باعث می شود هنگامی که چندین و چند منوی مخفی ساز داریم کاربر بین آن ها گیج نشود و دقیقا مشخص شود کدام منو در حال باز شدن است.
استفاده از جاوا اسکریپت
شما می توانید به جای کار با کلاس ها به صورت دستی از جاوا اسکریپت برای مخفی سازی عناصر استفاده کنید. برای این کار کد شما باید پیرو ساختار زیر باشد:
در مثال زیر سه نوع دکمه را قرار دادیم که هر سه باعث مخفی شدن محتوا می شوند؛ یکی کار نمایش (show) دیگری کار مخفی سازی (hide) و آخرین دکمه نیز کار هر دو را انجام می دهد:
منبع: روکسو