如何在類語法中只展開其父元素的子元素？

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')); ，你是說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將包含所有（在這個片段中2）， ul的內線#mobile-menu這是一個的兄弟姐妹.mobileCategory （這就是為什么兩個元素被現在的而不是只是一個點擊展開）。

所以，我的建議，再次檢查你的Accordian ，但是，暫時，這是一個片段，它做你真正想要的。

就像現在一樣，在你clicked(e)函數中，你需要使用事件arg（ e ）來獲得被點擊的確切元素，然后將動畫所需的任何樣式應用於它或它的兄弟。 另外，我建議盡可能添加/刪除/切換CSS類，並在CSS文件中創建這些類，而不是從JS編輯CSS代碼。

最后一件事，我刪除了這個行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>