یک مؤلفه آکاردئونی متحرک جاوا اسکریپت با پانل های همپوشانی بسازید

در این آموزش جدید، نحوه ساخت کامپوننت آکاردئونی جاوا اسکریپت متحرک با پانل های همپوشانی را خواهیم آموخت.

جزء آکاردئون ما

در اینجا چیزی است که ما می خواهیم ایجاد کنیم (برای آزمایش رفتار روی پانل کلیک کنید):

1. با نشانه گذاری صفحه شروع کنید

در داخل یک ظرف، لیستی از پانل ها را قرار می دهیم.

هر پانل دارای عنوان و محتوا خواهد بود. در عنوان، ما یک را اضافه می کنیم بستن دکمه ای که از آنجا می توانیم پنل فعال را ببندیم.

در اینجا ساختار مورد نیاز است:

1

 class="accordion-wrapper">

2

3

4

      
 class="accordion-title">...

5

      
 class="accordion-content">

6

        
 class="inner">...

7

8

9

10

      
 class="accordion-title">...

11

      
 class="accordion-content">

12

        
 class="inner">...

13

14

15

16

      
 class="accordion-title">...

17

      
 class="accordion-content">

18

        
 class="inner">...

19

20

21

22

      
 class="accordion-title">...

23

      
 class="accordion-content">

24

        
 class="inner">...

25

26

27

28

حالت اولیه/اقلام فعال آکاردئون

به طور پیش فرض، همه پانل ها جمع می شوند.

برای جلوگیری از این رفتار، ما باید آن را تعیین کنیم active کلاس به یک یا چند پانل مانند این:

چند پانل باز

همچنین این گزینه وجود دارد که بیش از یک پانل به طور همزمان باز شود بدون اینکه یکی از آنها در هنگام باز بودن دیگری جمع شود. برای فعال کردن این، ما باید اضافه کنیم data-multiple="true" به لفاف آکاردئون به این صورت نسبت دهید:

1

 class="accordion-wrapper" data-multiple="true">...

2. CSS را اضافه کنید

اکنون بیایید روی سبک های کلیدی تمرکز کنیم – بیشتر سبک های دیگر چیز خاصی نیستند، بنابراین فعلا آنها را رها می کنیم:

• برای همپوشانی پانل ها و ایجاد یک طرح آکاردئونی متفاوت در مقایسه با نمونه های استاندارد، به آنها یک حاشیه منفی بالا و یک لایه زیرین برابر می دهیم. فقط برای اولین و آخرین موارد، به ترتیب حاشیه بالا و لایه پایین را لغو می کنیم.
• برای پنهان کردن محتوای هر پانل، به آنها می دهیم height: 0 و overflow: hidden. سپس، همانطور که بعداً خواهیم دید، از طریق جاوا اسکریپت، ارتفاع آنها را مجدداً محاسبه کرده و به آرامی آنها را آشکار خواهیم کرد. فقط، توجه داشته باشید که ما نیز استفاده خواهیم کرد height: 0 !important برای بازنشانی ارتفاع به 0 و لغو سبک های جاوا اسکریپت برای یک پانل فعال قبلی.
• برای باز کردن مودال، کل ناحیه پانل قابل کلیک خواهد بود. برای روشن شدن موضوع، تعیین می کنیم cursor: pointer به تمام پانل ها برعکس، زمانی که یک پنل باز است، تنها از طریق دکمه بستن می توانیم آن را ببندیم. در حال حاضر فقط این دکمه خواهد بود cursor: pointer در حالی که پانل خواهد داشت cursor: default.

در اینجا بخشی از سبک های مورد نیاز آمده است:

1

/*CUSTOM STYLES HERE*/

2

3

.accordion-wrapper li {

4

  padding: 0 20px 100px;

5

  cursor: pointer;

6

  border-top-left-radius: var(--accordion-radius);

7

  border-top-right-radius: var(--accordion-radius);

8

  background: var(--accordion-bg-color);

9

  transition: all 0.2s ease-out;

10

}

11

12

.accordion-wrapper li:not(:first-child) {

13

  margin-top: -100px;

14

  border-top: 2px solid var(--light-cyan);

15

}

16

17

.accordion-wrapper li:nth-last-child(2),

18

.accordion-wrapper li:last-child {

19

  border-bottom-left-radius: var(--accordion-radius);

20

  border-bottom-right-radius: var(--accordion-radius);

21

}

22

23

.accordion-wrapper li:last-child {

24

  padding-bottom: 0;

25

}

26

27

.accordion-wrapper:not((data-multiple="true")) li.active {

28

  border-top-color: var(--accordion-active-bg-color);

29

}

30

31

.accordion-wrapper li.active {

32

  cursor: default;

33

  color: var(--white);

34

  background: var(--accordion-active-bg-color);

35

}

36

37

.accordion-wrapper li:not(.active) .accordion-content {

38

  height: 0 !important;

39

}

40

41

.accordion-wrapper .accordion-content {

42

  height: 0;

43

  overflow: hidden;

44

  transition: height 0.3s;

45

}

46

47

.accordion-wrapper .inner {

48

  padding-bottom: 40px;

49

}

50

51

@media (min-width: 700px) {

52

  .accordion-wrapper li {

53

    padding-left: 60px;

54

    padding-right: 60px;

55

  }

56

57

  .accordion-wrapper .inner {

58

    max-width: 85%;

59

  }

60

}

3. جاوا اسکریپت را اضافه کنید

روشی که ما هر پانل را متحرک می کنیم و به یک افکت اسلاید شبیه به jQuery می رسیم slideToggle() عملکرد با بهره گیری از scrollHeight دارایی

این ویژگی ارتفاع محتوای یک عنصر را اندازه گیری می کند، از جمله محتوایی که به دلیل سرریز روی صفحه قابل مشاهده نیست. در مورد ما، باید آن مقدار را برای آن محاسبه کنیم .accordion-content عناصری که دارند height: 0 و overflow: hidden به طور پیش فرض

وقتی DOM آماده شد

به عنوان اولین اقدام، وقتی DOM آماده شد، بررسی می‌کنیم که آیا پنل‌های فعالی وجود دارد یا خیر، و اگر چنین است، ارتفاع را برای .accordion-content عنصر هر پانل فعال برابر با آن است scrollHeight ارزش ملک

در اینجا کد جاوا اسکریپت مربوطه آمده است:

1

const activeItems = accordionWrapper.querySelectorAll("li.active");

2

3

if (activeItems) {

4

  activeItems.forEach(function (item) {

5

    const content = item.querySelector(".accordion-content");

6

    content.style.height = `${content.scrollHeight}px`;

7

  });

8

}

پانل های آکاردئون را تغییر دهید

در مرحله بعد، هر بار که روی پانل کلیک می کنیم، کارهای زیر را انجام می دهیم:

1. بررسی کنید که آیا روی دکمه بستن کلیک کرده ایم. اگر این اتفاق افتاد و پانل باز بود، با حذف آن آن را می بندیم active کلاس و نادیده گرفتن تمام مراحل بعدی.
2. بررسی کنید که آیا گزینه باز شدن چند پانل با هم را تنظیم کرده ایم. اگر اینطور نیست و یک پنل فعال وجود دارد، آن را می بندیم.
3. را اضافه کنید active کلاس به آن پنل
4. ارتفاع را برای .accordion-content عنصر این پانل برابر با آن است scrollHeight ارزش ملک

در اینجا کد جاوا اسکریپت است که همه آن رفتار را پیاده سازی می کند:

1

const accordionWrapper = document.querySelector(".accordion-wrapper");

2

const items = accordionWrapper.querySelectorAll("li");

3

const multiple_open = accordionWrapper.dataset.multiple;

4

const ACTIVE_CLASS = "active";

5

6

items.forEach(function (item) {

7

  item.addEventListener("click", function (e) {

8

    // 1

9

    const target = e.target;

10

    if (

11

      (target.tagName.toLowerCase() === "button" || target.closest("button")) &&

12

      item.classList.contains(ACTIVE_CLASS)

13

    ) {

14

      item.classList.remove(ACTIVE_CLASS);

15

      return;

16

    }

17

18

    // 2

19

    if (

20

      "true" !== multiple_open &&

21

      document.querySelector(".accordion-wrapper li.active")

22

    ) {

23

      document

24

        .querySelector(".accordion-wrapper li.active")

25

        .classList.remove(ACTIVE_CLASS);

26

    }

27

28

    // 3

29

    item.classList.add(ACTIVE_CLASS);

30

31

    // 4

32

    const content = item.querySelector(".accordion-content");

33

    content.style.height = `${content.scrollHeight}px`;

34

  });

35

});

نتیجه گیری

انجام شد! امیدوارم از آکاردئون جاوا اسکریپتی که ساختیم لذت برده باشید و یکی دو چیز جدید یاد گرفته باشید.

قبل از بسته شدن، بیایید خلاقیت اصلی امروز خود را به یاد بیاوریم:

مثل همیشه، خیلی ممنون که خواندید!