یک آکاردئون انحصاری با چندین عنصر <details>
که name
یکسانی دارند ایجاد کنید.
آکاردئون
یک الگوی رابط کاربری رایج در وب، یک جزء آکاردئونی است. این مؤلفه ای است که از چندین ویجت افشا تشکیل شده است که به صورت جداگانه می توان آنها را گسترش داد (یا جمع کرد) تا محتوای آنها آشکار شود (یا پنهان شود).
برای پیادهسازی این الگو در وب، چند عنصر <details>
را ترکیب میکنید و معمولاً آنها را به صورت بصری گروهبندی میکنید تا نشان دهید که به یکدیگر تعلق دارند.
آکاردئون انحصاری
پشتیبانی مرورگر
یکی از انواع الگوی آکاردئون، آکاردئون انحصاری است که در آن تنها یکی از ویجتهای افشا را میتوان همزمان باز کرد.
برای رسیدن به این هدف در وب، اکنون می توانید یک ویژگی name
به عناصر <details>
اضافه کنید. هنگامی که از این ویژگی استفاده می شود، چندین عنصر <details>
که دارای مقدار name
یکسانی هستند، یک گروه معنایی را تشکیل می دهند و به عنوان یک آکاردئون انحصاری رفتار می کنند. هنگامی که یکی از عناصر <details>
را از گروه باز می کنید، عنصری که قبلاً باز شده بود به طور خودکار بسته می شود.
<details name="learn-css">
<summary>Welcome to Learn CSS!</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Selectors</summary>
<p>…</p>
</details>
یک صفحه می تواند چندین آکاردئون منحصر به فرد داشته باشد. هر زمان که از یک مقدار name
جدید در عنصر <details>
استفاده می کنید، یک گروه منطقی جدید ایجاد می شود.
توجه داشته باشید که عناصر <details>
که بخشی از یک آکاردئون انحصاری هستند لزوماً لازم نیست خواهر و برادر باشند. آنها می توانند در سراسر سند پراکنده شوند. این ویژگی name
است که آنها را گروه بندی می کند، نه ترتیب DOM آنها.
آکاردئون انحصاری را پلی پر کنید
با جاوا اسکریپت زیر میتوان رفتار آکاردئون انحصاری را چندگانه پر کرد. کد متکی به رویداد toggle
عنصر <details>
است.
وقتی یک عنصر <details>
با name
باز می شود، کد سایر عناصر <details>
باز را با همان مقدار برای ویژگی name
پیدا کرده و آنها را می بندد.
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
برخی از نسخههای قدیمی مرورگرها این رویداد toggle
فعال نمیکنند. در آن مرورگرها کد polyfill کاری انجام نمی دهد. از نظر افزایش تدریجی ، این رفتار قابل قبول است.