Boshqasini ochganda bir panelni yoping

I would like to make it for if one of these panels is open, it'll close when you've clicked on another panel. I looked at some other questions similar to mine but it seems they all uses a different method for the panels.

Heres a Fiddle of it: https://jsfiddle.net/3q87y2u8/

Xristian:

    var acc = document.getElementsByClassName("accordion");
    var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
            panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    } 
   }
}

Men "+" tugmachasini bosganimda rangni o'zgartirishni xohlayman. Hozirda matnni yoqtirmaslik kerak. To'g'ri, CSS-da uni chaqirishning iloji yo'q.

Rahmat!

2
Nima uchun jQuery kabi JS kutubxonalaridan foydalanmayapsiz?
qo'shib qo'ydi muallif Saurabh Agrawal, manba

6 javoblar

Keyinchalik nashr etilgan akkordeon elementiga havola qilish oddiyroq va undan samarali usul bo'ladi.

Onclick chaqirilganda siz avval panelni bosganligini tekshirishni xohlaysiz. Shunday qilib, kallakni almashtirish faqat uni yopadi. So'ngra null ga sozlang, shuning uchun boshqa panelni bosganingizda avvalgi panelni ochib bo'lmaydi. Keyin vazifadan chiqishga ishonch hosil qiling. Qabul qilish uchun cheksiz checksadan oldin buni qilish kerakligini unutmang.

Aks holda, hozir faol elementni joriy tekshiruvni tekshirib ko'ring, null yo'qligini tekshiring, so'ngra ikkalasini ham o'zgartiring. Bunga to'siq qo'yish orqali uni o'rab, shuning uchun keyingi safar uni qayta-qayta qilishingiz mumkin!

Also, here's a fiddle: https://jsfiddle.net/d7smh9ru/4/

var cur = null;
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

   //Only close already open panel
    if (cur == this) {
      toggleItem(cur);
      cur = null;
      return;
    }

   //Close current panel, and open this panel
    if (cur) {
      toggleItem(cur);
    }

    toggleItem(this);
    cur = this;
  }
}

function toggleItem(item) {
  item.classList.toggle("active");
  var panel = item.nextElementSibling;
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
}
1
qo'shib qo'ydi
Oh, ahmoq! Javoblarni takliflarim bilan tahrir qilaman.
qo'shib qo'ydi muallif hola, manba
Bu boshqalar aytgan narsalar bilan birlashib, barchangizga minnatdor bo'lishim kerak bo'lgan joy haqida gapirib berganday tuyuladi! Bu erda yana bir muammo bor. Bu juda yumshoq va toza ishlaydi, faqat istaganim! Endi agar ochsangiz, uni yopolmaysiz. Agar siz boshqa birovni ochib yuborsangiz, uni yopish uchun uni ochib qo'yishingiz mumkin. Bu kichkina narsa, lekin "-" belgisi bor odamga xDni yopishi mumkinligini ko'rsatish juda ko'p ahamiyatga ega bo'lmaydi. Agar sizda biron bir taklif mavjud bo'lsa, hozir men nima qilmoqchiman: jsfiddle.net/d7smh9ru
qo'shib qo'ydi muallif Warren Breedlove, manba
Ishlamoqchi! rahmat. Va men uni bir oz ko'proq tushunaman
qo'shib qo'ydi muallif Warren Breedlove, manba

Siz faol bo'lgan elementni olishingiz va faol sinfni shunday o'chirishingiz mumkin:

// Is an array of elements matching the selector
var active = document.getElementsByClassName('active');

// If there are any matching elements and it is not the same one that has just been clicked on
if (active.length && active[0] !== this) {
    active[0].classList.remove('active');
}

Bir tomonlama sharh (albatta e'tibordan chetda qoldirmang!): Maksimal balandlik uchun siz balandlikni aniqlab olishingizga hojat yo'q (agar sizning barchangizning tuzilgan sahifa tuzilishingiz qanday bo'lishiga ta'sir qilmasa). Siz faqat katta balandlikdan foydalanishingiz mumkin va u siz o'rnatgan maksimal balandlikdan emas, balki uning balandligi avtomatik ravishda uning tabiiy bo'yiga boradi. Bundan tashqari, animatsiyani o'z ichiga olgan CSS-dan foydalangan holda foydalanishingiz mumkin va ortiqcha belgisida hover matnini yangilash ham quyida joylashgan.

// Set regular state height to 0 and add a transition effect
.panel {
    max-height: 0px;
    transition: max-height .25s ease;
}

// For whatever button is active find the adjacent panel and set its max height and a transition effect
.active + .panel {
  max-height: 250px;
  transition: max-height .25s ease;
}

// Here is where you change the color of the active and hovered plus/minus sign
button.accordion.active:after,
button.accordion:hover:after {
  color: red;
}

https://jsfiddle.net/xz2mpzg2/1/ https://jsfiddle.net/xz2mpzg2/2/

1
qo'shib qo'ydi
Hmm, bu kechikishning ko'pini olish imkoniga ega emasman, lekin maksimal balandlikni belgilashga urinib ko'ring: 1px o'rniga 1px. Buning 100 foizligiga ishonchim komil emas. boshqa ko'rinish.
qo'shib qo'ydi muallif Pango, manba
@WarrenBreedlove Maksimal balandlikni pastga tushiraman. Eng katta div divi taxminan 200px bo'lganiga o'xshab tuyuldi, shuning uchun uni 250 marta xavfsiz deb belgilab qo'ydim, kerak bo'lganda sozlashingiz kerak edi. Agar bu haqda tashvishlansangiz, siz balandlikni topish va maksimal balandlikni o'rnatish uchun kerak bo'lgan JS fikrini qayta tiklashingiz mumkin. Agar siz animatsiya haqida qayg'urmasangiz, siz balandlikni faqatgina balandlikda o'rnatishingiz mumkin: 0 va keyin balandlik: faol bo'lganda avtomatik ravishda (va o'tishlarni olib tashlash).
qo'shib qo'ydi muallif Pango, manba
Qani rahmat, bu ishladi! va sharhlovchilar uchun. Sizning skripkada hozir bo'lganingiz bilan. Agar siz ilgari ochilgan yana bir divni ochsangiz, u yerda bir soniya o'tirishga to'g'ri keladi, ikkinchisi esa keyin yaqinlashadi. Bu juda kamdan-kam uchraydi. O'tish uchun vaqt ajratish bilan mashg'ul bo'ldim, lekin uni tuzatishga o'xshamaydi. Har qanday fikr bormi? Uning mukammalligi bundan boshqa! @ Pango
qo'shib qo'ydi muallif Warren Breedlove, manba
Buni tuzatish kabi ko'rinmadi. Biror sochni yaxshi ko'rish mumkin, lekin uning asosini xuddi shunday deb o'ylayman
qo'shib qo'ydi muallif Warren Breedlove, manba

JQuery bilan osonlik bilan foydalanishingiz mumkin:

A.) .toggle();

B.) .change();

C.) .addClass();/removeClass();

0
qo'shib qo'ydi

Kodingizni ko'rib chiqqandan so'ng, siz faqat joriy yorliqni ochayotganingizni va Boshqa tablarni yopmaganingizda topdim. Shunday qilib, buni sinab ko'ring

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        var panels=document.getElementsByClassName("panel");
        for (j = 0; j < panels.length; j++) {
            panels[j].style.maxHeight = null;
        }
        if (panel.style.maxHeight){
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    }
}
0
qo'shib qo'ydi
@WarrenBreedlove yopiq, siz o'z sinfini o'zgartirishingiz kerak
qo'shib qo'ydi muallif Saurabh Agrawal, manba
Ishlayotganga o'xshaydi, lekin boshqa bolalar kabi katta bo'ladilar. Anotex ni bosgan bo'lsangiz, uni yoqing, lekin ochilganni yopolmaysiz. Agar fon yopilsa fon rangi ham normal holatga qaytmaydi
qo'shib qo'ydi muallif Warren Breedlove, manba

Men shunga o'xshash biror narsa izlayapman deb o'ylayman: JSFiddle .

Har bir o'zgarishimdan o'tib ketaman va har bir bayonot ham sharhlanadi, lekin umumiy direktor sifatida har bir tugma/matn guruhi atrofida div sarlavhasini ishlatish uchun kodni o'zgartirdim va qo'ydim max-height ga mos keladigan ichki div ichidagi matn. Agar siz xatlarni p teglariga joylashtirsangiz va br belgilaridan foydalansangiz, sizning < kodi> p ni bosing. Bu shuningdek, hover-changes-plus-color effektini ota-onaning : hover pseudoclass-dan foydalanib amalga oshirish uchun juda ahamiyatsiz edi.

Shunday qilib, tugma/matn guruhlarini o'zgartirsangiz:

<button class="accordion">Home</button>
<div class="panel">
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

quyidagilar:

<div class="panel">
  <button class="accordion">Home</button>
  <div class="content">
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div> </div>

va panel sinfini tarkibi ga o'zgartirgan holda (bundan avval JSFiddle ning 50-satrida boshlangan) CSS-ni yangilang:

.content {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 50px;
  background-color: #f6f6f6;
  width: 220px;
  font-size: 10px;
  max-height: 100px;
}

CSS-dan maksimal balandlikni ochilmagan panellarda 0 ga sozlang

div.panel:not(.opened) > .content {
  max-height: 0;
}

Keyin, voqealar tinglovchilarini tugmachalarga o'rnatishingiz mumkin va ota-onalarning ochilgan klassini o'zgartirishingiz mumkin:

document.querySelectorAll('.accordion')
  .forEach(element => {
    element.onclick = function() {

     //first, iterate over other open panels and close them...
     //note: using Array.from(...) so we can filter the result below.
      Array.from(document.querySelectorAll('.panel.opened'))

       //...but skip the clicked panel, which will be dealt with below
       //[edit] we filter here so we can close an already-open panel
        .filter(panel => panel !== this.parentNode)

        .forEach(panel => {

         //toggle the 'opened' class, forcing `false`
          panel.classList.toggle('opened', false)

         //and remove styling that was set on the element itself
          panel.querySelector('.content').style.maxHeight = null;
        });

     //now toggle the clicked panel's 'opened' class and capture its new value
      const toggled = this.parentNode.classList.toggle('opened');

     //reference the new div.content, inside the button's parent
      const content = this.parentNode.querySelector('.content');

     //and either fix its max height or unset it, depending on new state
      content.style.maxHeight = toggled? `${content.scrollHeight}px` : null;
    }
  });

Nihoyat, agar siz "+" rangini ta'kidlashni o'zgartirmoqchi bo'lsangiz, endi .panel da : hover pseudoclass yordamida buni amalga oshirishingiz mumkin:

div.panel:hover > button.accordion:after {
  color: red;
}
0
qo'shib qo'ydi

shrink all the divs right after the button click. The jsfiddle here https://jsfiddle.net/3q87y2u8/3/

var acc = document.getElementsByClassName("accordion");
            var i;

                for (i = 0; i < acc.length; i++) {
                    acc[i].onclick = function() {
                    this.classList.toggle("active");
    var panels=document.getElementsByClassName("panel");
    for (j = 0; j < panels.length; j++) {
    panels[j].style.maxHeight = null;
    }
                    var panel = this.nextElementSibling;
                    if (panel.style.maxHeight){
                    panel.style.maxHeight = null;
            } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
            } 
           }
        }
0
qo'shib qo'ydi
ishlayotgan ko'rinadi, lekin keyin u erda fon ranglari xafa bo'lib chiqadi va qaytib borish kerak emas. Bu yerga qarang: jsfiddle.net/cc1hj0kn
qo'shib qo'ydi muallif Warren Breedlove, manba
Bundan tashqari, siz ochgan panelni yopishga ham ruxsat berilmaydi
qo'shib qo'ydi muallif Warren Breedlove, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb