Как развернуть только дочерний элемент своих родителей в синтаксисе класса? - PullRequest
Новая
       36

Как развернуть только дочерний элемент своих родителей в синтаксисе класса?

0 голосов
/ 27 апреля 2019

Я пытаюсь выбрать дочерний элемент своего родительского элемента (a.k.a firstPanel) в синтаксисе класса, но не знаю, как мне это сделать.

Легко ссылаться на каждый firstPanel в обычной функции, и он прекрасно работает следующим образом: 

$(function accordian() {
  $('.mobileCategory').on('click', function() {
    if (!$(this).hasClass('open')) {
      $(this).addClass('open');
      $(this).siblings('.firstPanel').stop(true, true).animate({
        maxHeight: 1000 + 'px'
      });
    } else if ($(this).hasClass('open')) {
      $(this).removeClass('open');
      $(this).siblings('.firstPanel').stop(true, true).animate({
        maxHeight: null
      });
    }
  })
})

enter image description here

но когда я щелкну по элементу под синтаксисом класса, все .firstPanel развернется так:

enter image description here

Я знаю, this.list предполагает весь firstPanel. Я просто не знаю, как бы я отнес дочерний элемент своих родителей в синтаксис класса.

Есть ли способы сделать это?

Полный код: 

class Accordian {
  constructor($el) {
    this.$el = $el;
    this.category = this.$el.find('.mobileCategory');
    this.list = this.category.siblings();
    /* Boolean Flags */
    this.flags = {
      active: false,
    };
  }
  clicked(e) {
    console.log('text')
    this.list.css({
      maxHeight: 1000 + 'px'
    })
  }
  manange() {
    console.log(this.list, 'text');
    this.$el.on({['click']: (e) => this.clicked(e)});
  }
}
var thatAccordian = new Accordian($('#mobile-menu'));
    thatAccordian.manange();
a {
  text-decoration: none;
  color: white;
}
#mobile-menu {
  position: absolute;
  z-index: 999;
  color: white;
  width: 100%;
  height: calc(100% - 110px);
  top: 110px;
  background-color: #202020;
}
.wrapper, li {
  display: block;
  flex-flow: column;
  margin: 1rem;
  transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.wrapper > li > ul {
  transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
  flex-flow: column;
  max-height: 0;
  overflow: hidden;
  margin: 0 1rem;
}
.wrapper > li > ul > li {
  transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
  flex-flow: column;
  margin: 1rem 0;
  font-size: .8rem;
  outline-width: 0;
  border-width: 0;
  border-bottom: 1px solid white;
}
  <div id="mobile-menu">
    <ul class="wrapper">
      <li>
        <a href="#" class="mobileCategory">MODELS</a>
        <ul class="firstPanel">
          <li>URUS</li>
          <li>HURACÁN</li>
          <li>AVENTADOR</li>
          <li>FEW OFF</li>
          <li>CONCEPT</li>
          <li>AD PERSONAM</li>
          <li>OVERVIEW</li>
        </ul>
      </li>
      <li>
        <a href="#" class="mobileCategory">BRAND</a>
        <ul class="firstPanel">
          <li>PEOPLE</li>
          <li>HISTORY</li>
          <li>MASTERPIECE</li>
          <li>DESIGN</li>
          <li>INNOVATION & EXCELLENCE</li>
          <li>OVERVIEW</li>
        </ul>
      </li>
      <li>
      <li><a href="#" class="mobileCategory">MOTORSPORT</a></li>
      <li><a href="#" class="mobileCategory">STORE</a></li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1 Ответ

0 голосов
/ 27 апреля 2019

Что ж, согласно вашим комментариям, я думаю, что вы, возможно, захотите пересмотреть свой Accordian дизайн.Вот несколько указателей:

  • Вы говорите , каждая mobileCategories - это Accordian , но когда вы создаете объект Accordian, подобный этому: var thatAccordian = new Accordian($('#mobile-menu'));, вы указываете одинотношения один к одному между thatAccordian и #mobile-menu, не правда ли?
  • Теперь взгляните на конструктор, когда вы скажете, что this.$el = $el;, this.$el заканчивается #mobile-menuне с одним .mobileCatetgory;аналогично, когда вы пишете this.category = this.$el.find('.mobileCategory');, кто-то может подумать под именем category (в единственном числе), что category заканчивается одним .mobileCategory элементом, но это не так.Попробуйте console.log -ing, и вы увидите, как category содержит ВСЕ (4 в этом фрагменте) элемента категории s .Наконец, то же самое происходит с this.list = this.category.siblings();;this.list будет содержать ALL (2 в этом фрагменте) ul s внутри #mobile-menu, которые являются братьями и сестрами .mobileCategory (именно поэтому два элемента расширяются прямо сейчас, а не только один нажатый).

Итак, мой совет, проверьте ваш Accordian еще раз, но на данный момент вот фрагмент, который делает то, что вы на самом деле хотели.

Как сейчас, внутри вашего clicked(e) функция, вам нужно использовать событие arg (e), чтобы получить точный элемент, по которому щелкают, и затем применить любой стиль, необходимый для анимации к нему или его родным элементам.Кроме того, я рекомендую добавлять / удалять / переключать классы CSS, когда это возможно, и создавать эти классы в файле CSS, а не редактировать код CSS из JS.

И последнее, я удалил эту строку height: calc(100% - 110px); во фрагментев противном случае черный фон был потерян при расширении списка.Кроме того, запустите фрагмент в полноэкранном режиме.

HIH 

class Accordian {
  constructor($el) {
    this.$el = $el;
    this.category = this.$el.find('.mobileCategory');
    this.list = this.category.siblings();
    
    /* Boolean Flags */
    this.flags = {
      active: false,
    };
  }
  clicked(e) {
    //console.log($(e.target))
    
    $(e.target).siblings('ul').toggleClass('expanded');
    /*this.list.css({
      maxHeight: 1000 + 'px'
    })*/
  }
  manange() {
    //console.log(this.list, 'text');
    this.$el.on({['click']: (e) => this.clicked(e)});
  }
}
var thatAccordian = new Accordian($('#mobile-menu'));
    thatAccordian.manange();
a {
  text-decoration: none;
  color: white;
}
#mobile-menu {
  position: absolute;
  z-index: 999;
  color: white;
  width: 100%;
  /*height: calc(100% - 110px);*/
  top: 110px;
  background-color: #202020;
}
.wrapper, li {
  display: block;
  flex-flow: column;
  margin: 1rem;
  transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.wrapper > li > ul {
  transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
  flex-flow: column;
  max-height: 0;
  overflow: hidden;
  margin: 0 1rem;
}
.wrapper > li > ul > li {
  transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
  flex-flow: column;
  margin: 1rem 0;
  font-size: .8rem;
  outline-width: 0;
  border-width: 0;
  border-bottom: 1px solid white;
}

.wrapper > li > ul.expanded{
  max-height: 1000px;
}
<div id="mobile-menu">
    <ul class="wrapper">
      <li>
        <a href="#" class="mobileCategory">MODELS</a>
        <ul class="firstPanel">
          <li>URUS</li>
          <li>HURACÁN</li>
          <li>AVENTADOR</li>
          <li>FEW OFF</li>
          <li>CONCEPT</li>
          <li>AD PERSONAM</li>
          <li>OVERVIEW</li>
        </ul>
      </li>
      <li>
        <a href="#" class="mobileCategory">BRAND</a>
        <ul class="firstPanel">
          <li>PEOPLE</li>
          <li>HISTORY</li>
          <li>MASTERPIECE</li>
          <li>DESIGN</li>
          <li>INNOVATION & EXCELLENCE</li>
          <li>OVERVIEW</li>
        </ul>
      </li>
      <li>
      <li><a href="#" class="mobileCategory">MOTORSPORT</a></li>
      <li><a href="#" class="mobileCategory">STORE</a></li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...