如何在类语法中仅显示其父母拥有的子元素？

Question

我正在尝试在“类语法”中选择其父项（也称为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
      });
    }
  })
})

但是当我单击“类语法”下的元素时，整个.firstPanel将像这样展开：

我知道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>

Answer 1

好吧，根据您的评论，我认为您可能想重新审视Accordian设计。这里有一些指针：

• 您说每个mobileCategories是一个Accordian ，但是，当您创建Accordian这样的var thatAccordian = new Accordian($('#mobile-menu'));对象时，您表示{ {1}}和thatAccordian，您不说吗？
• 现在来看一下构造函数，当您说#mobile-menu时，this.$el = $el;以this.$el结尾，而不是一个#mobile-menu；同样，当您编写.mobileCatetgory时，有人可能会以this.category = this.$el.find('.mobileCategory');的名称（单数）认为category以一个category元素结尾，但事实并非如此。尝试.mobileCategory-ing它，您将看到console.log如何包含所有（此片段中为4）类别元素 s 。最后，category也会发生同样的情况； this.list = this.category.siblings();将包含this.list中的所有ul内的所有{此片段中的2个} #mobile-menu（这就是为什么现在扩展两个元素而不是仅仅扩展两个元素的原因）一个被点击）。

所以，我的建议是，再次检查您的.mobileCategory，但是，暂时有一段代码可以满足您的实际需求。

目前，在Accordian函数内部，您需要使用事件arg（clicked(e)）来获取要单击的确切元素，然后应用所需的样式动画，或它的兄弟姐妹。另外，我建议尽可能添加/删除/切换CSS类，并在CSS文件中创建这些类，而不是从JS编辑CSS代码。

最后一件事，我在代码段中删除了此行e，否则在扩展列表时会丢失黑色背景。另外，以全屏模式运行代码段。

HIH

height: calc(100% - 110px);

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;
}